web-dev-qa-db-ja.com

<input type = "number">フィールドの生の値を取得する方法は？

<input type="number">フィールドの "real"値を取得するにはどうすればよいですか？

inputボックスがあり、新しいHTML5入力タイプnumberを使用しています。

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

これはほとんどChrome 29でサポートされています：

enter image description here

今必要なのは、ユーザーが入力ボックスに入力した "raw"値を読み取る機能です。ユーザーが番号を入力した場合：

enter image description here

edQuantity.value = 4、そしてすべてが順調です。

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

enter image description here

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

edQuantity.value = "" (String);

（少なくともChrome 29で）

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

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

enter image description here

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

また、ボックス「空」かどうかを判断する方法を見つけることもできません。たぶん私は推測できたかもしれません：

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

注：横罫線の後はすべて無視できます。質問を正当化するための単なるフィラーです。また、例と質問を混同しないでください。人々は、この質問に対する答えを、ボックスを赤くする以外の理由otherで望むかもしれません（1つの例：テキスト"four"をラテン"4"記号に変換するonBlurイベント）

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

ボーナスリーディング

javascripthtml5validationinput
110
Ian Boyd

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

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

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

W も同じ仕様を持ち、追加されます：

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

52
j08691

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

edQuantity.validity.valid

オブジェクトの ValidityState は、ユーザーが入力した内容に関する手がかりを与えます。 minとmaxが設定されたtype="number"入力を考えます

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

私たちはalways.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;
}

ボーナス

Spudlyは彼が削除した有用な答えを持っています：

これにはCSS :invalidセレクターを使用してください。

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

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

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

:invalidの詳細はこちら 。

47
Ian Boyd
input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();
11
int32_t

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

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

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

3
sandstrom