text-input-guard 0.2.1 → 0.2.2

package/README.md

@@ -1,11 +1,19 @@
-# TextInputGuard
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://natade-jp.github.io/text-input-guard/ogp-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://natade-jp.github.io/text-input-guard/ogp-light.svg">
+    <img src="https://natade-jp.github.io/text-input-guard/ogp-light.svg" width="700" alt="TextInputGuard">
+  </picture>
+</p>
 
-TextInputGuard は、**開発中**の日本向けの入力欄ガードライブラリです。
+TextInputGuard は、**開発中**の日本語入力環境を前提に設計された入力補助ライブラリです。
 
-`<input>` / `<textarea>` に対して、数値入力や日本語特有の制約（全角混在、桁数、表示整形など）を扱いやすい形で提供します。
+`<input>` / `<textarea>` に対して、全角混在・桁数制限・小数処理・表示整形など、日本語環境特有の入力制御を扱いやすい形で提供します。業務系フォームや金額入力など、IME の影響を受けやすい入力欄でも、表示用の値と送信用の値を分離しながら、安定した入力制御を実現できます。
 
-シンプルな設計のため、機能追加も簡単に行えます。
+---
 
-詳細は以下をご確認ください
+## Documentation
 
-### **[TextInputGuard 紹介](https://natade-jp.github.io/text-input-guard/)**
+詳しいドキュメントはこちら
+
+👉 https://natade-jp.github.io/text-input-guard/

package/dist/cjs/text-input-guard.cjs

@@ -165,6 +165,7 @@ class SwapState {
 		// raw化（送信担当）
 		input.type = "hidden";
 		input.removeAttribute("id");
+		input.removeAttribute("class");
 		input.className = "";
 		input.dataset.tigRole = "raw";
 
@@ -172,6 +173,9 @@ class SwapState {
 		if (this.originalId) {
 			input.dataset.tigOriginalId = this.originalId;
 		}
+		if (this.originalClass) {
+			input.dataset.tigOriginalClass = this.originalClass;
+		}
 		if (this.originalName) {
 			input.dataset.tigOriginalName = this.originalName;
 		}
@@ -192,7 +196,10 @@ class SwapState {
 			display.id = this.originalId;
 		}
 
-		display.className = this.originalClass ?? "";
+		if (this.originalClass) {
+			display.className = this.originalClass;
+		}
+
 		display.value = raw.value;
 
 		for (const [name, v] of Object.entries(this.originalUiAttrs)) {
@@ -253,6 +260,7 @@ class SwapState {
 
 		delete raw.dataset.tigRole;
 		delete raw.dataset.tigOriginalId;
+		delete raw.dataset.tigOriginalClass;
 		delete raw.dataset.tigOriginalName;
 	}
 }
@@ -446,6 +454,28 @@ function warnLog(msg, warn) {
 	}
 }
 
+/**
+ * input / textarea 要素と内部 Guard インスタンスの対応表
+ *
+ * - key: displayElement
+ * - value: InputGuard（内部実装）
+ *
+ * @type {WeakMap<HTMLInputElement|HTMLTextAreaElement, InputGuard>}
+ */
+const guardMap = new WeakMap();
+
+document.addEventListener("selectionchange", () => {
+	const el = document.activeElement;
+	if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+		return;
+	}
+	const inputGuard = guardMap.get(el);
+	if (!inputGuard) {
+		return;
+	}
+	inputGuard.onSelectionChange();
+});
+
 /**
  * 指定した1要素に対してガードを適用し、Guard API を返す
  * @param {HTMLInputElement|HTMLTextAreaElement} element
@@ -453,9 +483,12 @@ function warnLog(msg, warn) {
  * @returns {Guard}
  */
 function attach(element, options = {}) {
-	const guard = new InputGuard(element, options);
-	guard.init();
-	return guard.getGuard();
+	const inputGuard = new InputGuard(element, options);
+	inputGuard.init();
+	const guard = inputGuard.getGuard();
+	const display = guard.getDisplayElement();
+	guardMap.set(display, inputGuard);
+	return guard;
 }
 
 /**
@@ -551,7 +584,7 @@ class InputGuard {
 		/**
 		 * ユーザーが直接入力する表示側要素
 		 * swapしない場合は originalElement と同一
-		 * @type {HTMLElement}
+		 * @type {HTMLInputElement|HTMLTextAreaElement}
 		 */
 		this.displayElement = element;
 
@@ -673,6 +706,12 @@ class InputGuard {
 		 */
 		this.pendingCompositionCommit = false;
 
+		/**
+		 * selection 更新のフレーム予約ID
+		 * @type {number|null}
+		 */
+		this.selectionFrameId = null;
+
 		/**
 		 * 直前に受理した表示値、正しい情報のスナップショットのような情報（block時の戻し先）
 		 * @type {string}
@@ -718,9 +757,11 @@ class InputGuard {
 	 * @returns {SelectionState}
 	 */
 	readSelection(el) {
+		const start = el.selectionStart ?? 0;
+		const end = el.selectionEnd ?? start;
 		return {
-			start: el.selectionStart,
-			end: el.selectionEnd,
+			start,
+			end,
 			direction: el.selectionDirection
 		};
 	}
@@ -834,6 +875,8 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	detach() {
+		// 管理マップから削除
+		guardMap.delete(this.displayElement);
 		// イベント解除（displayElementがswap後の可能性があるので先に外す）
 		this.unbindEvents();
 		// swap復元
@@ -894,15 +937,7 @@ class InputGuard {
 		this.displayElement.addEventListener("input", this.onInput);
 		this.displayElement.addEventListener("beforeinput", this.onBeforeInput);
 		this.displayElement.addEventListener("blur", this.onBlur);
-
-		// フォーカスで編集用に戻す
 		this.displayElement.addEventListener("focus", this.onFocus);
-
-		// キャレット/選択範囲の変化を拾う（block時の不自然ジャンプ対策）
-		this.displayElement.addEventListener("keyup", this.onSelectionChange);
-		this.displayElement.addEventListener("mouseup", this.onSelectionChange);
-		this.displayElement.addEventListener("select", this.onSelectionChange);
-		this.displayElement.addEventListener("focus", this.onSelectionChange);
 	}
 
 	/**
@@ -916,10 +951,6 @@ class InputGuard {
 		this.displayElement.removeEventListener("beforeinput", this.onBeforeInput);
 		this.displayElement.removeEventListener("blur", this.onBlur);
 		this.displayElement.removeEventListener("focus", this.onFocus);
-		this.displayElement.removeEventListener("keyup", this.onSelectionChange);
-		this.displayElement.removeEventListener("mouseup", this.onSelectionChange);
-		this.displayElement.removeEventListener("select", this.onSelectionChange);
-		this.displayElement.removeEventListener("focus", this.onSelectionChange);
 	}
 
 	/**
@@ -1287,12 +1318,41 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	onSelectionChange() {
-		// IME変換中は無視（この間はキャレット位置が不安定になることがあるため）
-		if (this.composing) {
-			return;
+		const requestFrame =
+			typeof requestAnimationFrame === "function"
+				? requestAnimationFrame
+				: (
+					/** @param {FrameRequestCallback} cb */
+					(cb) => setTimeout(cb, 0)
+				);
+
+		const cancelFrame =
+			typeof cancelAnimationFrame === "function"
+				? cancelAnimationFrame
+				: clearTimeout;
+
+		// すでに予約済みならキャンセル（selectionchange は連続発火するため）
+		if (this.selectionFrameId != null) {
+			cancelFrame(this.selectionFrameId);
 		}
-		const el = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
-		this.lastAcceptedSelection = this.readSelection(el);
+
+		this.selectionFrameId = requestFrame(() => {
+			this.selectionFrameId = null;
+
+			// IME変換中は無視（キャレット位置が不安定になるため）
+			if (this.composing) {
+				return;
+			}
+
+			const el = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
+
+			// 要素がフォーカスされていない場合は無視
+			if (document.activeElement !== el) {
+				return;
+			}
+
+			this.lastAcceptedSelection = this.readSelection(el);
+		});
 	}
 
 	/**
@@ -7031,7 +7091,7 @@ function bytes(options = {}) {
 					code: "bytes.max_overflow",
 					rule: "bytes",
 					phase: "validate",
-					detail: { max: opt.max, actual: len }
+					detail: { limit: opt.max, actual: len }
 				});
 			}
 		}
@@ -7377,11 +7437,11 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""0.2.1"" を package.json の version に置換
+ * 例: rollup replace で ""0.2.2"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "0.2.1" ;
+const version = "0.2.2" ;
 
 exports.ascii = ascii;
 exports.attach = attach;