☰

生の値を取得する方法フィールド? 質問する

tag-icon • tag-icon javascript html validation input
生の値を取得する方法フィールド? 質問する

どうすれば"本物"フィールドの値ですか<input type="number">?

私はinputボックスを持っており、新しい HTML5 入力タイプを使用していますnumber:

<input id="edQuantity" type="number">

これは主に Chrome 29 でサポートされています。

ここに画像の説明を入力してください

今必要なのは、"生"ユーザーが入力ボックスに入力した値。ユーザーが数値を入力した場合:

ここに画像の説明を入力してください

するとedQuantity.value = 4、すべてうまくいきます。

しかし、ユーザーが無効なテキストを入力した場合、入力ボックスの色を赤にします。

ここに画像の説明を入力してください

残念ながら、type="number"入力ボックスの場合、テキスト ボックス内の値が数値でない場合はvalue空の文字列が返されます。

edQuantity.value = "" (String);

(少なくとも Chrome 29 では)

どうすれば"生"コントロールの値ですか<input type="number">?

Chrome の入力ボックスの他のプロパティのリストを調べてみました:

ここに画像の説明を入力してください

実際の入力に似たものは何も見つかりませんでした。

箱が「空です」、あるいはそうではない。おそらく私は次のように推測できただろう:

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

注記: 水平線より後ろの部分は無視してかまいません。これは質問を正当化するための単なる埋め草です。また、例と質問を混同しないでください。人々はこの質問の答えを知りたいと思うかもしれません。他のボックスを赤く着色するよりも（例： onBlurイベント中にテキストを"four"ラテン文字に変換する）"4"

どうすれば"生"コントロールの値ですか<input type="number">?

ボーナス読書

ベストアンサー1

による何ですか有効な数値入力でない限り、値を取得することはできません。入力数値フィールドのサニタイズ アルゴリズムでは、入力が有効な浮動小数点数でない場合、ブラウザーは値を空の文字列に設定することになっています。

の値のサニタイズアルゴリズムは次のようになります。価値要素は有効な浮動小数点数代わりに空の文字列に設定します。

type ( <input type="number">) を指定すると、ブラウザに何らかの処理を依頼することになります。一方、数値以外の入力をキャプチャして何らかの処理を実行したい場合は、古くから実績のあるテキスト入力フィールドに頼って、自分でコンテンツを解析する必要があります。

のW3同じ仕様で、次の点が追加されています:

ユーザーエージェントは、ユーザーが有効な浮動小数点数ではない空でない文字列に値を設定することを許可してはなりません。

おすすめ記事