to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

Androidで、HTMLフォームにmaxlength属性を指定すると、文字入力できなくなる場合がある

こんにちは。x-fitチーム・エバンジェリストの渡辺です。Android4.1のいくつかの端末で、フォームの文字入力ができなくなる事象が確認されたのでご紹介します。

確認された現象

  • HTML上のフォームで、テキストボックスにmaxlength属性を指定しておきます。以下のようなコードで確認できます。

ソースコード例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>maxlength attribute test</title>
</head>
<body>
<form action="#">
<label for="ln">姓<input type="text" name="lastname" id="ln" maxlength="10"/></label><br/>
<label for="fn">名<input type="text" name="firstname" id="fn" maxlength="10"/></label>
</form>
</body>
</html>
  • 端末からアクセスし、maxlengthで指定された文字数以上の文字を入力します(見た目上はmaxlength指定文字数以上は入力できません)。
  • それ以降、フォーム内容の修正も、別フォームの入力もできなくなります。再読込みをしても解消できず、一度ブラウザを終了して、もう一度起動しなおす必要があります。
2段目のテキストボックスには入力できなくなっています。
Galaxy Nexus(SC-04D)での表示。2段目のテキストボックスには、入力しても反映されていません。

原因と回避策

 
この現象そのものは、Android4.1.1のAndroidブラウザのバグではないかと報告されているものだと思われます。
 
 
ただ、弊社の確認できる範囲では、現象が発生しているのは下記の端末です。おそらく、下記の端末以外は、メーカーが手を入れて解消しているものと思われます。
  • Galaxy Nexus(SC-04D)[Android 4.1] Build/JRO03C
  • HONEY BEE(R)(201K)[Android 4.1] Build/117.1.1c00
maxlength属性は非常に多用されるものであるため、注意が必要です。現状での回避策は、maxlengthの使用をやめて、JavaScriptを使って文字数チェックを行うくらいでしょう。スマートフォン向けwebサイトでmaxlengthを使用している場合は、実機で確認してみることをお勧めします。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 

 

タグ: 
このエントリーをはてなブックマークに追加