HTML/CSS

判定

input、textareaのmaxlength属性は文字数で判定される

更新日:2024-04-24

◆formのinput要素、textarea要素で使うmaxlengthは文字数で判定される

・formの入力時に使用されるinput要素とtextarea要素ですが、文字数を制限する時に使用する maxlength属性は文字数で判定されています。

・漢字でも1文字、半角英数字でも1文字として判定されるので、formを日本語・英語両方対応しようとする場合は、最長値に注意が必要です。

textareaの場合、改行も1文字と判定されます

・JIS第3水準・JIS第4水準では4バイト文字も存在し、その場合maxlengthでは2文字と判定されてしまう場合もあります。
試しに右の文字「𠀋」「𩸽」を入力欄へコピペして確認すると、2文字で4バイトと判定されます。

・データベースの文字コード設定によってはエラーになる場合もあるので、MySQLの場合は文字コードをutf8mb4にするなど4バイト文字を扱えるか注意する必要もあります。

動作例 - Sample

▶半角英数字や日本語などを入力すると、文字数やバイト数(UTF-8)を確認できます

input

入力テキスト:

文字数:0

バイト数:0(UTF-8)

textarea

入力テキスト:

文字数:0

バイト数:0(UTF-8)