HTMLフォームをいじるひとだとおなじみの<input>タグですが、maxlength属性を使用する場合、ブラウザによって日本語などの全角文字に対する挙動が違うので注意が必要なことが分かりました。
<input>タグのmaxlength属性は、テキストの入力フォームの最大文字数を制限するために使用します。
例えば、半角英数字に限定した最大10文字のユーザ名を入力するフォームならば、
<input type="text" name="username" value="" maxlength="10" size="15">のように記述すれば、10文字以上の半角英数字を受け付けなくなります。
こうすることで、ユーザの利便性を向上させ、(実は、おまけ程度ですが)セキュリティ上にも良くなります。しかし、最大文字数を制限するためのmaxlengthは日本語のような2バイトコードになると突然扱いが面倒になることが分かりました。
少々古い記事ですが、ZSPC - テキストボックスのmaxlengthについてを参照してみると、Mac版とWin版の IE (Internet Explorer) と NN (Netscape Navigator) の挙動の違いについて書かれています。
Mac版はMac OS Xになる前ですし、そもそも最近NNを使っている人を見かけたことがないので、今回、Windows XPでFirefoxを動作させたときに入力文字数がどうなるのかをチェックし、表にまとめてみました。
OS | Netscape Navigator 4.7 | Internet Explorer 5.0 | Mozilla Firefox 2.0 | |||
---|---|---|---|---|---|---|
半角 | 全角 | 半角 | 全角 | 半角 | 全角 | |
Mac OS | 50文字 (50byte) | 50文字以上 (100byte以上) | 50文字 (50byte) | 100文字 (200byte) | 不明 | 不明 |
Windows | 50文字 (50byte) | 15文字 (30byte?) | 50文字 (50byte) | 50文字 (100byte) | 50文字 (50byte) | 50文字 (100byte) |
う〜ん、大変だ。
よく、タグリファレンス系統のサイトを見ても、maxlength属性についての説明がまちまちなんですよね。
半角文字列の文字数だから全角文字の日本語は半分の文字数と書かれているサイトもあれば、入力文字の最大数と敢えてその辺りの話題に触れてないサイトもありますし。
しかしながら、日本語は2バイトコードなので、maxlengthにおける全角文字列は半角文字列の半分だと思いこんでいた私の知識はどう考えても間違えだと言うことがよく分かりました。
そもそもインターネット環境においては、悪意のあるユーザが存在すること前提でシステムを開発しなければいけませんので、<input>タグのmaxlength属性をあてにした実装は期待してはいけないと言うことですね。
そんなわけで、システム開発者の皆様、maxlength属性にもてあそばれないように気をつけましょ〜。
コメント