Neden “number” türündeki html girişi alana 'e' harfinin girilmesine izin veriyor?


217

Aşağıdaki html5 giriş öğesi var:

<input type="number">

Bu giriş neden giriş alanına 'e' karakterinin girilmesine izin veriyor? Başka hiçbir alfabe karakteri girilemiyor (beklendiği gibi)

Chrome v. 44.0.2403.107 kullanma

Ne demek istediğimi görmek için: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number


3
Ayrıca .bazı tarayıcılarda +, - ve birden çok kez girmenizi sağlar .
nu everest

Yanıtlar:


218

Çünkü spec tam da böyle çalışmalı. Kabul edebilir sayı girişi kayan noktalı sayılar negatif sembol ve dahil eveya E(üs sonra numarayı olan karakteri eya E):

Kayan nokta sayısı, aşağıdaki parçalardan tam olarak aşağıdaki sırada oluşur:

  1. İsteğe bağlı olarak, ilk karakter " -" karakteri olabilir.
  2. " 0—9" Aralığındaki bir veya daha fazla karakter .
  3. İsteğe bağlı olarak, aşağıdaki parçalar, tam olarak aşağıdaki sırayla:
    1. bir " ." karakteri
    2. " 0—9" aralığında bir veya daha fazla karakter
  4. İsteğe bağlı olarak, aşağıdaki parçalar, tam olarak aşağıdaki sırayla:
    1. bir " e" karakteri veya " E" karakteri
    2. isteğe bağlı olarak, bir " -" karakteri veya " +" karakteri
    3. " 0—9" Aralığındaki bir veya daha fazla karakter .

2
Ah teşekkürler. Yanlış özelliklere
Gnarlywhale

4
Hala şaşırıyorum, her şeyden önce matematikçi değilim, yani "e" bir sayı bağlamında ne anlama geliyor? İkincisi, rakamlar olmasına ve karaktere izin verilse bile, girişte "e" yazdığınızda input.value'nun boş bir dize olduğunu anlamıyorum ...
Simon

9
@Simon, kullanarak eaksi takdirde yazmak sıkıcı olacak büyük sayıları yoğunlaştırmak için yararlıdır. Önemsiz bir örnek olarak,2e2 = 2*10^2 = 200
Gnarlywhale

3
@Simon "e yazdığımda " , evet, "4e" bir sayı değil, örneğin "4e + 0" geçerli bir sayıdır (4). Kısmi kullanıcı girişiyle çalışan bazı "canlı" istemci tarafı javascript kodunuz varsa, kullanıcıya tam değer sağlamak ve düzenlemenin yarısına müdahale etmemek için giriş düzenlemesini bitirmesi için zaman vermeniz gerekir. "4e + 0" girişinden "tanımsız" varsa, "sayı" ayrıştırıcısını sabitleyin. Sorudan alınan örnek iyi çalışıyor, hata olarak "4e + 1" bildiriyor ve "4e + 0" doğru olarak "4e + 0" olarak döndürülüyor (yani 1 ile 5 arasındaki sayı).
Ped7g

4
@ Anthony No, eÜs anlamına gelir.
Scott Marcus

62

Aşağıdaki gibi çok basit yapabiliriz

<input type="number"  onkeydown="javascript: return event.keyCode == 69 ? false : true" />

Güncellenmiş Yanıt

@ 88 MPG'nin önerdiği gibi daha da basit hale getirebiliriz

<input type="number" onkeydown="return event.keyCode !== 69" />


17
return event.keyCode !== 69Gereksiz üçlü operatörü önlediğinden kullanımı daha iyidir. Ayrıca inlining tavsiye etmem.
Adam Fratino

5
Bu, kopya yapışmasını eveya Ealanda olmasını engellemez
molamk

18

HTML giriş numarası türü "e / E" ye izin verir, çünkü "e" sayısal bir sembol olan üstel anlamına gelir.

Örnek 200000 ayrıca 2e5 olarak da yazılabilir. Umarım bu soru için teşekkür eder.          


15

Yalnızca rakamlardan oluşan bir sayının kullanımını zorlamanın en iyi yolu :

<input type="number" onkeydown="javascript: return event.keyCode === 8 ||
event.keyCode === 46 ? true : !isNaN(Number(event.key))" />

bu 'e', ​​'-', '+', 'kelimelerini önler.' ... sayı olmayan tüm karakterler!

Yalnızca sayı tuşlarına izin vermek için:

isNaN (Sayı (event.key))

ancak "Backspace" (keyCode: 8) ve "Delete" (keyCode: 46) öğelerini kabul edin ...


11
<input type="number" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)"  >

function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;

    isNotWanted = (keyCode == 69 || keyCode == 101);
    return !isNotWanted;
};
function handlePaste (e) {
    var clipboardData, pastedData;

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();

    if(pastedData.indexOf('E')>-1) {
        //alert('found an E');
        e.stopPropagation();
        e.preventDefault();
    }
};

2
Bunun, kopyalama ve yapıştırma işlevine sahip bir 'E' karakteri eklemeyi engelleyeceğinden ne kadar eminsiniz?
StephenKelzer

1
Sadece kontrol ettiniz, haklısınız, kopyalama ve yapıştırılan giriş için çalışmıyor.
Gnarlywhale

Doğru, @StephenKelzer. Bunu işlemek için kod ekledim.
TruthSeeker

4

Hem harfi hem de eeksi işaretini gizlemek -için şunları yapın:

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"

3

Açısal kullanarak, e, +, -, E girilmesini kısıtlamak için bunu yapabilirsiniz

 <input type="number"  (keypress)="numericOnly($event)"/>


  numericOnly(event): boolean { // restrict e,+,-,E characters in  input type number
    debugger
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode == 101 || charCode == 69 || charCode == 45 || charCode == 43) {
      return false;
    }
    return true;

  }

2
bu kullanıcının bu karakteri girmesini kısıtlar ??
Amy

1
Yardım için teşekkürler ben açısal olarak aynı çözümü arıyordum ama şimdi bunu nasıl yapacağım hakkında bir fikrim var, direktif oluşturacağım ve görevi tamamlayacağım
Amy

en iyi uygulama olan yönergeyi oluşturabilirsiniz. ayrıca doğrudan bileşeninizin .ts dosyasında da yapabilirsiniz!
rinku Choudhary

0

Açısal; IDE keyCode kullanımdan kaldırıldı uyarısıyla

İşlevsel olarak rinku'nun cevabı ile aynı, ancak IDE uyarı önleme ile

numericOnly(event): boolean {
    // noinspection JSDeprecatedSymbols
    const charCode = (event.which) ? event.which : event.key || event.keyCode;  // keyCode is deprecated but needed for some browsers
    return !(charCode === 101 || charCode === 69 || charCode === 45 || charCode === 43);
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.