Bir alanın "gerçek" değerini nasıl alabilirim <input type="number">?

Bir inputkutum var ve daha yeni HTML5 girdi türü kullanıyorum number:

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

Bu, çoğunlukla Chrome 29'da desteklenir:

Şimdi ihtiyacım olan şey , kullanıcının giriş kutusuna girdiği "ham" değeri okuma yeteneğidir . Kullanıcı bir sayı girdiyse:

o zaman edQuantity.value = 4ve her şey yolunda.

Ancak kullanıcı geçersiz metin girerse, giriş kutusunu kırmızıya boyamak istiyorum:

Ne yazık ki, bir type="number"giriş kutusu için, metin kutusundaki değer bir sayı değilse value, boş bir dize döndürür:

edQuantity.value = "" (String);

(en azından Chrome 29'da)

Bir kontrolün "ham" değerini nasıl alabilirim <input type="number">?

Chrome'un giriş kutusunun diğer özelliklerinin listesine bakmayı denedim:

gerçek girdiye benzeyen hiçbir şey görmedim.

Kutunun "boş" olup olmadığını anlamanın bir yolunu da bulamadım. Belki şu sonuca varabilirdim:

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

Not : Yatay kuraldan sonraki her şeyi göz ardı edebilirsiniz; sadece soruyu haklı çıkarmak için doldurucu. Ayrıca: örneği soruyla karıştırmayın. İnsanlar bu sorunun cevabını kutuyu kırmızıya boyamaktan başka nedenlerle isteyebilirler (Bir örnek: onBlur olayı sırasında metni "four"latin "4"sembolüne dönüştürmek )

Bir kontrolün "ham" değerini nasıl alabilirim <input type="number">?

Bonus Okuma

• jsFiddle yukarıdakilerin tümü (güncellendi)
• Yeni giriş türleri için Quirkmode.org girişi

WHATWG'ye göre , geçerli sayısal giriş olmadığı sürece değeri alamamanız gerekir. Giriş numarası alanının temizleme algoritması, giriş geçerli bir kayan nokta sayısı değilse tarayıcının değeri boş bir dizeye ayarlaması gerektiğini söyler.

Değer sanitization algoritması aşağıdaki gibidir: Eğer değer elemanın bir değil geçerli kayan noktalı sayı sonra yerine boş bir dizeye ayarlayın.

Türü ( <input type="number">) belirterek, tarayıcıdan sizin için bazı işler yapmasını istersiniz. Öte yandan, sayısal olmayan girdiyi yakalayabilmek ve onunla bir şeyler yapmak istiyorsanız, eski denenmiş ve doğru metin giriş alanına güvenmeniz ve içeriği kendiniz ayrıştırmanız gerekir.

W3 aynı özeliklere sahip ve ekler:

Kullanıcı aracıları, kullanıcının değeri geçerli bir kayan noktalı sayı olmayan boş olmayan bir dizeye ayarlamasına izin vermemelidir.

Soruyu cevaplamıyor, ancak faydalı çözüm kontrol etmektir.

edQuantity.validity.valid

ValidityStateBir nesnenin kullanıcı yazdıklarınızın hakkında ipuçları verir. Ve setli bir type="number"giriş düşününminmax

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

Biz her zaman kullanmak istiyorum .validity.valid.

Diğer mülkler yalnızca bonus bilgileri verir:

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

Kullanmadan önce tarayıcının HTML5 doğrulamasını desteklediğinden emin olmanız gerekir:

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'nin sildiği faydalı bir cevabı var:

Bunun için CSS :invalidseçiciyi kullanın .

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

Bu, sayısal olmayan bir geçerli girildiğinde öğenizin kırmızıya dönmesini tetikleyecektir.

İçin tarayıcı desteği <input type='number'>yaklaşık olarak aynıdır :invalid, bu yüzden orada sorun yok.

:invalid Buradan daha fazlasını okuyun .

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

Tüm basılan tuşları anahtar kodlarına göre takip edin

Sanırım biri anahtar olaylarını dinleyebilir ve anahtar kodlarına göre girilen tüm karakterlerin bir dizisini tutabilir. Ama bu oldukça sıkıcı bir görev ve muhtemelen hatalara yatkın.

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

Girişi seçin ve seçimi bir dize olarak alın

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

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

<input type='number'>

Tüm kredi: int32_t