はじめに

上記のようなフォームがあった場合、maxlengthのとおり入力できる文字数は３文字になる。半角英数字の場合は３文字まで入力でき、それ以上入力してもフォームの値は変更されない。しかし、全角で入力した場合は３文字以上の入力が可能なように見える。全角で３文字以上入力した場合も、入力値を確定した時点で上限値を超えた部分は切り捨てられる。また、Chromeを使用した場合はブラウザ側の機能として、何文字超過しているかの表示がされる。

結果的には半角入力時とまったく同じようには実装できなかった。全角の場合でも上限値を超えて入力できないようにすることはできるが、表示や挙動を完璧に一致させることができなかった。おとなしくブラウザの標準機能かライブラリなどを使用するのが吉かも。

案1（sliceメソッドで超過分を削除） form> label>MaxLengthSample input id="hoge" type="text" maxlength=3 /> const inputForm = document.getElementById("hoge"); const maxLength = parseInt(inputForm.getAttribute("maxLength"), 10); inputForm.addEventListener('input', function(e) const inputValue = e.target.value; if (inputValue.length > maxLength) e.target.value = inputValue.slice(0, maxLength); > >); メリットデメリット

最大まで入力した状態でも、途中に文字を挿入できてしまう
最大値を超えてに入力はできないが、変換候補が一瞬表示されてしまう
漢字を入力する場合に、変換前の文字数でカウントされるため、文字数によっては漢字での入力ができなくなる

案2（保存した入力値で上書き） form> label>MaxLengthSample input id="hoge" type="text" maxlength=3 /> const inputForm = document.getElementById("hoge"); const maxLength = parseInt(inputForm.getAttribute("maxLength"), 10); let prevValue = ''; inputForm.addEventListener('input', function(e) const inputValue = e.target.value; if (inputValue.length > maxLength) e.target.value = prevValue; > else prevValue = inputValue; > >); メリット

最大まで入力した状態でも、途中に文字を挿入できない（半角入力時と同じ挙動）

デメリット

フォームが複数ある場合は、一次保存用変数の状態管理が煩雑になる
最大値を超えてに入力はできないが、変換候補が一瞬表示されてしまう
漢字を入力する場合に、変換前の文字数でカウントされるため、文字数によっては漢字での入力ができなくなる

まとめ

変換候補の非表示や、漢字変換時の字数制限は対応できなかった。（何かしら手がありそうだけど。。。）基本的にはブラウザの標準機能で対応が良さそう。そもそも、文字数超過した場合に切り捨ててしまうのはユーザーに誤解を与える可能性が高い（入力できたと思ってしまう）ので、よくある超過した場合はフォームを赤反転してメッセージを表示するとかが最善な気がします。

📎📎📎📎📎📎📎📎📎📎