inputフォームの文字数制限で気をつけるべき点

input要素のmaxlength属性で、入力可能な最大文字数を指定できます。

<input maxlength="8">

例として、上の例では8文字まで入力できる設定になっています。ですがこの属性を信頼しすぎてはいけません。

文字数がオーバーするケース

value属性により、最初からmaxlength以上の文字数を設定できます。

<input name="input__text" maxlength="8" value="foooooooooooooooo">

JavaScriptで要素のvalueプロパティを変更する時も、maxlengthは効かないです。

const inputElem = document.getElementsByName('input__text')[0];
inputElem.maxLength; // 8
inputElem.value = 'internationalization';

そもそもHTML機能による制限を取っ払うことは、Webエンジニアにとって朝飯前です。

inputText.removeAttribute('maxlength'); // これで制限がなくなる

見かけ上文字数が足らないケース

「𩸽」(ホッケという魚)などのサロゲートペア文字は、1文字で長さ2文字分という扱いになってします。"𩸽𩸽𩸽𩸽"だけで8文字扱いなので、フォームの直接入力ではそれ以上文字を追加できません。

inputElem.maxLength; // 8
inputElem.value = '𩸽𩸽𩸽𩸽';

文字の中には、全く見えないものもあります。

• ゼロ幅スペース ("\u200b")
• 単語結合子 ("\u2060")
• ゼロ幅接合子 ("\u200d")
• ゼロ幅非接合子 ("\u200c")

しかしながら、見えない文字であっても1つあたり1文字として扱われます。

inputElem.maxLength; // 8
inputElem.value = 'abcdefg\u200b';

出力は7文字に見えますが、フォームの直接入力ではそれ以上文字を追加できません。

参考リンク

• ゼロ幅 - Wikipedia