text-input-guard 0.2.0 → 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;
 	}
 }
@@ -398,7 +406,7 @@ class SwapState {
  * @typedef {Object} AttachOptions
  * @property {Rule[]} [rules] - 適用するルール配列（順番がフェーズ内実行順になる）
  * @property {boolean} [warn] - 非対応ルールなどを console.warn するか
- * @property {string} [invalidClass] - エラー時に付けるclass名
+ * @property {string} [invalidClass="is-invalid"] - エラー時に付けるclass名
  * @property {SeparateValueOptions} [separateValue] - 表示値と内部値の分離設定
  * @property {(result: ValidateResult) => void} [onValidate] - 評価完了時の通知（input/commitごと）
  */
@@ -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);
+		});
 	}
 
 	/**
@@ -2701,6 +2761,104 @@ comma.fromDataset = function fromDataset(dataset, _el) {
 	return comma();
 };
 
+/**
+ * The script is part of TextInputGuard.
+ *
+ * AUTHOR:
+ *  natade-jp (https://github.com/natade-jp)
+ *
+ * LICENSE:
+ *  The MIT license https://opensource.org/licenses/MIT
+ */
+
+/**
+ * IMEオフ入力相当の文字変換テーブル
+ * @type {Record<string, string>}
+ */
+/* eslint-disable quote-props */
+const IME_OFF_MAP = {
+	"\u3000": "\u0020", // 全角スペース → space
+	"\u3001": "\u002C", // 、 → ,
+	"\u3002": "\u002E", // 。 → .
+	"\u300C": "\u005B", // 「 → [
+	"\u300D": "\u005D", // 」 → ]
+	"\u301C": "\u007E", // 〜 → ~
+	"\u30FC": "\u002D", // ー → -
+	"\uFFE5": "\u005C"  // ￥ → \
+};
+/* eslint-enable quote-props */
+
+/**
+ * ASCII入力欄に日本語IMEで入った文字をASCIIへ矯正する
+ * @param {string} text - 変換したいテキスト
+ * @returns {string} 変換後のテキスト
+ */
+const toImeOff = function (text) {
+	return Array.from(String(text), (ch) => {
+		// 個別マップ
+		if (ch in IME_OFF_MAP) {
+			return IME_OFF_MAP[ch];
+		}
+
+		const code = ch.charCodeAt(0);
+
+		// 全角ASCII
+		if (code >= 0xFF01 && code <= 0xFF5E) {
+			return String.fromCharCode(code - 0xFEE0);
+		}
+
+		// シングルクォート系
+		if (code >= 0x2018 && code <= 0x201B) {
+			return "'";
+		}
+
+		// ダブルクォート系
+		if (code >= 0x201C && code <= 0x201F) {
+			return '"';
+		}
+
+		return ch;
+	}).join("");
+};
+
+/**
+ * ASCII入力欄に日本語IMEで入った文字をASCIIへ矯正する
+ *
+ * 注意:
+ * - これは「半角化」ではなく「IMEオフ入力相当への寄せ」
+ * - ascii() とは責務が異なる
+ *
+ * @returns {Rule}
+ */
+function imeOff() {
+	return {
+		name: "imeOff",
+		targets: ["input", "textarea"],
+
+		normalizeChar(value, ctx) {
+			return toImeOff(value);
+		}
+	};
+}
+
+/**
+ * dataset から imeOff ルールを生成する
+ *
+ * 対応する data 属性
+ * - data-tig-rules-ime-off
+ *
+ * @param {DOMStringMap} dataset
+ * @param {HTMLInputElement|HTMLTextAreaElement} _el
+ * @returns {Rule|null}
+ */
+imeOff.fromDataset = function fromDataset(dataset, _el) {
+	if (dataset.tigRulesImeOff == null) {
+		return null;
+	}
+
+	return imeOff();
+};
+
 /**
  * The script is part of Mojix for TextInputGuard.
  *
@@ -5922,7 +6080,7 @@ kana.fromDataset = function fromDataset(dataset, _el) {
 function ascii(options = {}) {
 	/** @type {AsciiRuleOptions} */
 	const opt = {
-		case: options.case ?? null
+		case: options.case ?? "none"
 	};
 
 	return {
@@ -5935,6 +6093,10 @@ function ascii(options = {}) {
 			// まず半角へ正規化
 			s = Mojix.toHalfWidthAsciiCode(s);
 
+			// toHalfWidthAsciiCode で対応できていない文字も実施
+			s = s.replace(/\uFFE5/g, "\u005C");	//￥
+			s = s.replace(/[\u2010-\u2015\u2212\u30FC\uFF0D\uFF70]/g, "\u002D"); //ハイフンに似ている記号
+
 			// 英字の大文字/小文字統一
 			if (opt.case === "upper") {
 				s = s.toUpperCase();
@@ -6929,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 }
 				});
 			}
 		}
@@ -7236,6 +7398,7 @@ const auto = new InputGuardAutoAttach(attach, [
 	{ name: "numeric", fromDataset: numeric.fromDataset },
 	{ name: "digits", fromDataset: digits.fromDataset },
 	{ name: "comma", fromDataset: comma.fromDataset },
+	{ name: "imeOff", fromDataset: imeOff.fromDataset },
 	{ name: "kana", fromDataset: kana.fromDataset },
 	{ name: "ascii", fromDataset: ascii.fromDataset },
 	{ name: "filter", fromDataset: filter.fromDataset },
@@ -7260,6 +7423,7 @@ const rules = {
 	numeric,
 	digits,
 	comma,
+	imeOff,
 	kana,
 	ascii,
 	filter,
@@ -7273,11 +7437,11 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""0.2.0"" を package.json の version に置換
+ * 例: rollup replace で ""0.2.2"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "0.2.0" ;
+const version = "0.2.2" ;
 
 exports.ascii = ascii;
 exports.attach = attach;
@@ -7287,6 +7451,7 @@ exports.bytes = bytes;
 exports.comma = comma;
 exports.digits = digits;
 exports.filter = filter;
+exports.imeOff = imeOff;
 exports.kana = kana;
 exports.length = length;
 exports.numeric = numeric;