text-input-guard 1.0.0 → 1.0.2

package/dist/umd/text-input-guard.js

@@ -118,11 +118,16 @@
 
 			const UI_ATTRS = [
 				"placeholder",
+				"list",
 				"inputmode",
 				"autocomplete",
+				"autocapitalize",
+				"autocorrect",
 				"minlength",
 				"maxlength",
+				"size",
 				"pattern",
+				"dir",
 				"title",
 				"tabindex",
 				"style",
@@ -154,6 +159,7 @@
 
 			for (const [k, v] of Object.entries(input.dataset)) {
 				if (k.startsWith("tig")) { continue; }
+				if (v == null) { continue; }
 				this.originalDataset[k] = v;
 			}
 		}
@@ -574,7 +580,7 @@
 
 			/**
 			 * attach時に登録されたバリデーション結果コールバック
-			 * @type {(result: ValidateResult) => void | undefined}
+			 * @type {((result: ValidateResult) => void) | undefined}
 			 */
 			this.onValidate = options.onValidate;
 
@@ -735,6 +741,11 @@
 			 */
 			this.beforeInputSnapshot = null;
 
+			/**
+			 * onBeforeInput イベントが発生したか否か
+			 */
+			this.existBeforeInputEvent = false;
+
 			/**
 			 * ルールからのrevert要求
 			 * @type {RevertRequest|null}
@@ -752,7 +763,7 @@
 			this.applySeparateValue();
 			this.bindEvents();
 			// 初期値を評価
-			this.evaluateInput();
+			this.evaluateCommit();
 		}
 
 		/**
@@ -991,12 +1002,12 @@
 		 */
 		createCtx({ useSnapshot = true } = {}) {
 			const snap = useSnapshot ? this.beforeInputSnapshot : null;
-			const inputType = snap?.inputType ?? "";
-			const insertedText = snap?.insertedText ?? "";
+			let inputType = snap?.inputType ?? "";
+			let insertedText = snap?.insertedText ?? "";
 
 			// 受理済み（正規化済み）の全文を「今回の編集の基準」として使う
 			// display.value はブラウザ側の編集結果が混ざるので、差分再構成の基準にはしない
-			const beforeText = this.lastAcceptedValue ?? "";
+			let beforeText = this.lastAcceptedValue ?? "";
 
 			// selection は2系統ある：
 			// - snapSel: beforeinput 時点で取得した selection（今回の編集の基準点になり得る）
@@ -1032,6 +1043,38 @@
 				baseSel = lastSel;
 			}
 
+			// beforeinput がない環境では、差分再構成の基準が「前回の受理値」しかないため、そこから今回の編集内容を推測する必要がある。
+			if (beforeText.length === 0 || !this.existBeforeInputEvent) {
+				const display = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
+				const current = display.value;
+				// 前回の値がとれないものの、何かしら入力情報がある状態
+				if (current.length > 0) {
+					// 文字列の先頭が前回の受理値と同じなら、末尾に何かしら入力されたと考えられる（オートコンプリート等）
+					if (current.toLocaleLowerCase().startsWith(beforeText.toLocaleLowerCase())) {
+						if (!current.startsWith(beforeText)) {
+							// 文字は同じだが、大文字と小文字の情報が替わっているなどのパターン
+							// 差し代わりが起きているため、前回値は基準にならないと判断して、差分全体を insertedText とする
+							beforeText = "";
+							insertedText = current;
+						} else {
+							// 末尾に追加されたと考えられる部分を insertedText とする
+							// 例: beforeText="abc" → current="abcde" なら、"de" が insertedText
+							insertedText = current.slice(beforeText.length);
+						}
+						// キャレットは前回値の末尾にあると推測する
+						baseSel = /** @type {SelectionState} */ {
+							start: beforeText.length,
+							end: beforeText.length,
+							direction: "none"
+						};
+						inputType = "insertText";
+					}
+				}
+			}
+			// existBeforeInputEvent は、少なくとも1回 beforeinput が発生したかどうかのフラグ
+			// これが false の場合、上記のような「beforeinputがない環境での推測ロジック」を走らせる。
+			this.existBeforeInputEvent = false;
+
 			let replaceStart = baseSel.start ?? 0;
 			let replaceEnd = baseSel.end ?? 0;
 
@@ -1044,10 +1087,10 @@
 				if (inputType === "deleteContentBackward") {
 					// Backspace: キャレットの左側1文字を削除
 					replaceStart = Math.max(0, replaceStart - 1);
-					replaceEnd = snapSel.start ?? replaceEnd;
+					replaceEnd = snapSel?.start ?? replaceEnd;
 				} else if (inputType === "deleteContentForward") {
 					// Delete: キャレットの右側1文字を削除
-					replaceStart = snapSel.start ?? replaceStart;
+					replaceStart = snapSel?.start ?? replaceStart;
 					replaceEnd = Math.min(beforeText.length, replaceEnd + 1);
 				}
 				// 追加で拾うならここ：
@@ -1254,16 +1297,23 @@
 			// console.log("[text-input-guard] input");
 			// compositionend後に input が来た場合、フォールバックを無効化
 			this.pendingCompositionCommit = false;
-			this.evaluateInput();
+			try {
+				this.evaluateInput();
+			} finally {
+				this.existBeforeInputEvent = false;
+			}
 		}
 
 		/**
 		 * beforeinput：入力が反映される直前に呼ばれる
 		 * - ここでの value/selection が「今回の編集の基準点」になる
-		 * @param {InputEvent} e
+		 * @param {Event} e
 		 * @returns {void}
 		 */
 		onBeforeInput(e) {
+			if (!(e instanceof InputEvent)) {
+				return;
+			}
 			const el = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
 			// 現時点（反映前）の選択範囲
 			const selection = this.readSelection(el);
@@ -1271,6 +1321,7 @@
 			const inputType = typeof e.inputType === "string" ? e.inputType : null;
 			/** @type {string|null} */
 			const insertedText = typeof e.data === "string" ? e.data : null;
+			this.existBeforeInputEvent = true;
 			this.beforeInputSnapshot = { selection, inputType, insertedText };
 		}
 
@@ -7441,11 +7492,11 @@
 
 	/**
 	 * バージョン（ビルド時に置換したいならここを差し替える）
-	 * 例: rollup replace で ""1.0.0"" を package.json の version に置換
+	 * 例: rollup replace で ""1.0.2"" を package.json の version に置換
 	 */
 	// @ts-ignore
 	// eslint-disable-next-line no-undef
-	const version = "1.0.0" ;
+	const version = "1.0.2" ;
 
 	exports.ascii = ascii;
 	exports.attach = attach;