フィールドの「実際の」値を取得するにはどうすればよい<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

注：横罫線の後はすべて無視できます。質問を正当化するための単なるフィラーです。また、例と質問を混同しないでください。人々が理由でこの質問への答えをお勧めします他のボックスの赤を着色よりを（一例：テキストを変換する"four"ラテン語に"4"onBlurイベント中にシンボル）

コントロールの「生の」値を取得するにはどうすればよい<input type="number">ですか？

ボーナスリーディング

• 上記すべてのjsFiddle（更新）
• 新しい入力タイプのQuirkmode.orgエントリ

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

値のサニタイズアルゴリズムは以下のとおりである場合に値要素のではない有効な浮動小数点数、代わりに空の文字列を設定します。

タイプ（<input type="number">）を指定することで、ブラウザーにいくつかの作業を依頼します。一方、数値以外の入力をキャプチャして何かを実行できるようにしたい場合は、古くて試された真のテキスト入力フィールドを使用して、自分でコンテンツを解析する必要があります。

W3は、同じスペックを持っており、追加します。

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

それは質問には答えませんが、便利な回避策はチェックすることです

edQuantity.validity.valid

ValidityStateオブジェクトのは、ユーザーが入力したものについての手がかりを与えます。type="number"a minとmaxsetのある入力を考えます

<input type="number" min="1" max="10">

私たちは、常に使いたいです.validity.valid。

他のプロパティはボーナス情報のみを提供します：

User's Input  .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

ブラウザを使用する前に、ブラウザがHTML5検証をサポートしていることを確認する必要があります。

function ValidateElementAsNumber(element)
{
   //Public Domain: no attribution required.
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

ボーナス

スパッドリーは彼が削除した有用な答えを持っています：

これにはCSS :invalidセレクターを使用するだけです。

input[type=number]:invalid {
    background-color: #FFCCCC;
}

これにより、数値以外の有効な値が入力されると、要素が赤に変わります。

のブラウザサポートは<input type='number'>とほぼ同じな :invalidので、問題ありません。

詳細については、:invalid こちらをご覧ください。

input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

キーコードに基づいて、押されたすべてのキーを追跡します

キーアップイベントをリッスンし、キーコードに基づいて入力されたすべての文字の配列を保持できると思います。しかし、これはかなり退屈な作業であり、おそらくバグが発生しやすくなります。

http://unixpapa.com/js/key.html

入力を選択し、文字列として選択を取得します

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

すべてのクレジット：int32_t