ブラウザ上の入力欄に文字制限を行うライブラリを作った！

はじめに
TextInputGuard
おわりに

はじめに

こんにちは！

ここ最近、ブラウザ上の入力欄に文字制限をかけられるライブラリを作っていました。

日本語IMEを使った入力制御は思った以上に難しく、既存の方法ではうまく扱えないことが多くあります。そのため、日本語環境でも扱いやすい入力制御ライブラリとして TextInputGuard を作りました。

TextInputGuard

公開箇所

TextInputGuard

IME入力でも安定したフォーム入力を実現する日本語向け入力制御ライブラリ

GitHub - natade-jp/text-input-guard: IME環境向けinput制御ライブラリ

IME環境向けinput制御ライブラリ. Contribute to natade-jp/text-input-guard development by creating an account on GitHub.

解説

どんなことができるライブラリなのかは、上記のドキュメントに詳しく書いてありますが、ここではざっくり説明します。

このライブラリは、HTMLの input タグの入力欄に対して、入力できる文字を制限するためのライブラリです。例えば、半角英数字だけ入力できるようにする、といったことができます。

最近の Web はかなり進化しているので、「標準機能だけでもできるのでは？」と思うかもしれません。実際、昔に比べればかなり楽にはなっています。

しかし、日本語環境で使う場合は、まだ足りない機能が多いのも事実です。

例えば、

<input type="text" pattern="[0-9A-Z]{5}" placeholder="ABCDE" />

document.addEventListener("input", function (e) {
 if (e.target.matches(".uppercase-code")) {
  e.target.value = e.target.value
  .toUpperCase()
  .replace(/[^A-Z0-9]/g, "");
 }
});

このように書けば、半角英数字（大文字）だけを最大5文字まで入力できるようにすることは簡単にできます。

しかし、このようにe.target.valueを直接書き換える方法だと、IME使用時にキャレット位置が初期化されてしまい、入力時に問題が発生することがあります。

「では、そもそも入力制限をかけるのではなく、エラーを表示すればよいのでは？」と思う人もいるかもしれません。しかしながら日本語環境では「半角」「全角」という概念を、必ずしも全ての利用者が理解しているわけではありません。「半角で入力してください」と言われても、「何のこと？」となるケースもあります。

では既存のライブラリを使えばよいかというと、これもなかなか難しいところです。

例えば有名なライブラリとしてCleave.jsがありますが、日本語IMEを前提とした設計ではありません。日本製のライブラリとしてはInputManJSがありますが、有料ライブラリであり、多機能である分コストも高くなります。単一の input フィールドのために導入するには、開発・配布込みで約30万円と、気軽に使えるものではありません。

ただし、一部の問題については改善も進んでいます。例えば数値入力については、2025年に Kyouhei Horizumi 様がinput[type="number"]に対して、全角数字を半角として受け付けるようにするプルリクエストを作成してくださいました。これにより、利用者は半角・全角をあまり意識せずに入力できるようになります。本当にありがたい話です。