text-input-guard 0.2.0 → 0.2.2

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

@@ -169,6 +169,7 @@
 			// raw化（送信担当）
 			input.type = "hidden";
 			input.removeAttribute("id");
+			input.removeAttribute("class");
 			input.className = "";
 			input.dataset.tigRole = "raw";
 
@@ -176,6 +177,9 @@
 			if (this.originalId) {
 				input.dataset.tigOriginalId = this.originalId;
 			}
+			if (this.originalClass) {
+				input.dataset.tigOriginalClass = this.originalClass;
+			}
 			if (this.originalName) {
 				input.dataset.tigOriginalName = this.originalName;
 			}
@@ -196,7 +200,10 @@
 				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)) {
@@ -257,6 +264,7 @@
 
 			delete raw.dataset.tigRole;
 			delete raw.dataset.tigOriginalId;
+			delete raw.dataset.tigOriginalClass;
 			delete raw.dataset.tigOriginalName;
 		}
 	}
@@ -402,7 +410,7 @@
 	 * @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ごと）
 	 */
@@ -450,6 +458,28 @@
 		}
 	}
 
+	/**
+	 * 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
@@ -457,9 +487,12 @@
 	 * @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;
 	}
 
 	/**
@@ -555,7 +588,7 @@
 			/**
 			 * ユーザーが直接入力する表示側要素
 			 * swapしない場合は originalElement と同一
-			 * @type {HTMLElement}
+			 * @type {HTMLInputElement|HTMLTextAreaElement}
 			 */
 			this.displayElement = element;
 
@@ -677,6 +710,12 @@
 			 */
 			this.pendingCompositionCommit = false;
 
+			/**
+			 * selection 更新のフレーム予約ID
+			 * @type {number|null}
+			 */
+			this.selectionFrameId = null;
+
 			/**
 			 * 直前に受理した表示値、正しい情報のスナップショットのような情報（block時の戻し先）
 			 * @type {string}
@@ -722,9 +761,11 @@
 		 * @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
 			};
 		}
@@ -838,6 +879,8 @@
 		 * @returns {void}
 		 */
 		detach() {
+			// 管理マップから削除
+			guardMap.delete(this.displayElement);
 			// イベント解除（displayElementがswap後の可能性があるので先に外す）
 			this.unbindEvents();
 			// swap復元
@@ -898,15 +941,7 @@
 			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);
 		}
 
 		/**
@@ -920,10 +955,6 @@
 			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);
 		}
 
 		/**
@@ -1291,12 +1322,41 @@
 		 * @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);
+			});
 		}
 
 		/**
@@ -2705,6 +2765,104 @@
 		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.
 	 *
@@ -5926,7 +6084,7 @@
 	function ascii(options = {}) {
 		/** @type {AsciiRuleOptions} */
 		const opt = {
-			case: options.case ?? null
+			case: options.case ?? "none"
 		};
 
 		return {
@@ -5939,6 +6097,10 @@
 				// まず半角へ正規化
 				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();
@@ -6933,7 +7095,7 @@
 						code: "bytes.max_overflow",
 						rule: "bytes",
 						phase: "validate",
-						detail: { max: opt.max, actual: len }
+						detail: { limit: opt.max, actual: len }
 					});
 				}
 			}
@@ -7240,6 +7402,7 @@
 		{ 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 },
@@ -7264,6 +7427,7 @@
 		numeric,
 		digits,
 		comma,
+		imeOff,
 		kana,
 		ascii,
 		filter,
@@ -7277,11 +7441,11 @@
 
 	/**
 	 * バージョン（ビルド時に置換したいならここを差し替える）
-	 * 例: 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;
@@ -7291,6 +7455,7 @@
 	exports.comma = comma;
 	exports.digits = digits;
 	exports.filter = filter;
+	exports.imeOff = imeOff;
 	exports.kana = kana;
 	exports.length = length;
 	exports.numeric = numeric;