html5 number inputで数字以外が入力できてしまう

HTML5になって、input要素にtype=”number”というのが指定できるようになる事になっていて。現行でも対応済みっぽい挙動を示すブラウザがいくつかあるんだけど、なんだか納得のいかない挙動。

↑100の後ろで、「a」とか押してみて?

opera.png←Opera9.8で試した結果
number inputというからには、数字以外を押しても無視される事を期待していたのだけれど、現に「a」って押したら「100a」になってしまう。

実験用HTMLファイル
test.html

上記で試した挙動は以下の通り。

  • Opera9.80:数字以外も入力できる。ただし、submitした時、数字以外が含まれていると、valueが空文字に置き換えられる。
  • Chrome4.1.249.1045:数字以外も入力できる。POSTもできてしまう。
  • FireFox3.6.2:数字以外も入力できる。POSTもできてしまう。
  • Safari4.0.5:数字以外も入力できる。POSTもできてしまう。

自分がなんか勘違いしてたりするかなぁ?

仕様見ると、「User agents must not allow the user to set the value to a string that is not a valid floating point number. (ユーザーエージェントは、ユーザーが妥当な浮動小数点数でない文字列をその値にセットできるようにしてはいけません。)」って書いてあるんだけど・・・

html5 number inputで数字以外が入力できてしまう” への7件のフィードバック

  1. そのtest.htmlで、例えば「12e1」という数字を入力すると、結果URLは「edit_price=120」になりました。(Opera10.60beta)
    Firefox3.5.10だと、結果URLは「edit_price=12e1」。
    あとはテストしていません。

  2. ごめんなさいコメント見落としていました。
    「12e1」が120になるということは、そういう入力も想定しているということですね。
    まさかと思って全角数字を試したら空文字に置き換えられてしまいました。んー(><)
    HTML5がもっと普及したら問題になって改善されることを期待しておこう。

  3. げげっ!「a」とか押してみて?のフォームですね。直しておきました。
    これで直ったら大恥だなぁ、と思ったのだけどやっぱり「100a」とか入力できちゃいますね。

  4. おお本当だ。フォーカスが外れた時点で数字だけになりますね。
    safari5.1も同様に動きました。ということは、Webkitの方でがんばってくれたのかな。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です