Bagaimana saya bisa mendapatkan nilai "nyata" dari suatu <input type="number">bidang?

Saya memiliki sebuah inputkotak, dan saya menggunakan jenis input HTML5 yang lebih baru number:

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

Ini sebagian besar didukung di Chrome 29:

Yang saya perlukan sekarang adalah kemampuan untuk membaca nilai "mentah" yang telah dimasukkan pengguna di kotak masukan. Jika pengguna telah memasukkan nomor:

kemudian edQuantity.value = 4, dan semuanya baik-baik saja.

Tetapi jika pengguna memasukkan teks yang tidak valid, saya ingin mewarnai kotak input dengan warna merah:

Sayangnya, untuk type="number"kotak masukan, jika nilai di kotak teks bukan angka maka valuemengembalikan string kosong:

edQuantity.value = "" (String);

(setidaknya di Chrome 29)

Bagaimana saya bisa mendapatkan nilai "mentah" dari sebuah <input type="number">kontrol?

saya mencoba melihat-lihat daftar properti Chrome lainnya dari kotak input:

saya tidak melihat apa pun yang menyerupai masukan sebenarnya.

Saya juga tidak dapat menemukan cara untuk mengetahui apakah kotak itu "kosong" , atau tidak. Mungkin saya bisa menyimpulkan:

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

Catatan : Anda dapat mengabaikan semuanya setelah aturan horizontal; itu hanya pengisi untuk membenarkan pertanyaan itu. Juga: jangan bingung antara contoh dengan pertanyaan. Orang mungkin ingin jawaban untuk pertanyaan ini untuk alasan lainnya selain mewarnai kotak merah (Salah satu contoh: mengubah teks "four"ke dalam latin "4"simbol selama acara onBlur)

Bagaimana saya bisa mendapatkan nilai "mentah" dari sebuah <input type="number">kontrol?

Bonus Membaca

• jsFiddle dari semua di atas (diperbarui)
• Entri Quirkmode.org untuk jenis masukan baru

Menurut WHATWG , Anda seharusnya tidak bisa mendapatkan nilai kecuali itu adalah input numerik yang valid. Algoritme sanitasi kolom nomor masukan mengatakan browser seharusnya menyetel nilai ke string kosong jika masukan bukan nomor floating point yang valid.

The algoritma nilai sanitasi adalah sebagai berikut: Jika nilai dari elemen bukanlah angka floating-point yang valid , kemudian set ke string kosong sebagai gantinya.

Dengan menentukan type ( <input type="number">) Anda meminta browser melakukan beberapa pekerjaan untuk Anda. Sebaliknya, jika Anda ingin dapat menangkap masukan non-numerik dan melakukan sesuatu dengannya, Anda harus bergantung pada bidang masukan teks yang sudah dicoba dan yang lama dan mengurai sendiri kontennya.

The W3 juga memiliki spesifikasi yang sama dan menambahkan:

Agen pengguna tidak boleh mengizinkan pengguna untuk menyetel nilai ke string tidak kosong yang bukan angka floating-point yang valid.

Itu tidak menjawab pertanyaan, tetapi solusi yang berguna adalah dengan memeriksanya

edQuantity.validity.valid

The ValidityStateobyek memberikan petunjuk tentang apa yang masuk pengguna. Pertimbangkan type="number"masukan dengan a mindan maxset

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

Kami selalu ingin menggunakan .validity.valid.

Properti lain hanya memberikan informasi bonus:

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

Anda harus memastikan bahwa browser mendukung validasi HTML5 sebelum menggunakannya:

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;
}

Bonus

Spudly memiliki jawaban berguna yang dia hapus:

Cukup gunakan :invalidpemilih CSS untuk ini.

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

Ini akan memicu elemen Anda menjadi merah setiap kali valid non-numerik dimasukkan.

Dukungan browser untuk <input type='number'>hampir sama :invalid, jadi tidak ada masalah di sana.

Baca lebih lanjut tentang di :invalid sini .

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

Lacak semua tombol yang ditekan berdasarkan kode kuncinya

Saya kira seseorang dapat mendengarkan acara keyup dan menyimpan array dari semua karakter yang dimasukkan, berdasarkan kode kuncinya. Tapi itu tugas yang cukup membosankan dan mungkin rentan terhadap bug.

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

Pilih input dan dapatkan seleksi sebagai string

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

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

<input type='number'>

Semua kredit ke: int32_t