Mengapa input html dengan tipe "angka" memungkinkan huruf 'e' dimasukkan di bidang?

217

Saya memiliki elemen input html5 berikut:

<input type="number">

Mengapa input ini memungkinkan karakter 'e' dimasukkan di bidang input? Tidak ada karakter alfabet lain yang bisa dimasukkan (seperti yang diharapkan)

Menggunakan chrome v. 44.0.2403.107

Untuk melihat apa yang saya maksud: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

Gnarlywhale
sumber
3
Anda juga dapat memasukkan +, -, dan .beberapa kali di beberapa browser.
nu everest

Jawaban:

218

Karena persis seperti itulah spec mengatakan itu harus bekerja. Input angka dapat menerima angka titik-mengambang , termasuk simbol negatif dan eatau Ekarakter (di mana eksponen adalah angka setelah eatau E):

Nomor floating-point terdiri dari bagian-bagian berikut, persis dengan urutan sebagai berikut:

  1. Secara opsional, karakter pertama mungkin " -" karakter.
  2. Satu atau lebih karakter dalam kisaran " 0—9".
  3. Secara opsional, bagian-bagian berikut, persis dengan urutan berikut:
    1. .karakter " "
    2. satu atau lebih karakter dalam kisaran " 0—9"
  4. Secara opsional, bagian-bagian berikut, persis dengan urutan berikut:
    1. a " e" karakter atau " E" karakter
    2. opsional, -karakter " +" atau " " karakter
    3. Satu atau lebih karakter dalam kisaran " 0—9".
j08691
sumber
2
Ah terima kasih. Saya mencari dalam spesifikasi yang salah
Gnarlywhale
4
Saya masih bingung dengan ini, pertama-tama saya bukan ahli matematika, jadi apa artinya "e" dalam konteks angka? Kedua saya tidak mengerti mengapa input.value adalah string kosong segera setelah Anda menulis "e" di dalamnya, meskipun ada angka dan karakter diizinkan ...
Simon
9
@Simon, menggunakan eini berguna untuk kondensasi angka besar yang akan membosankan untuk mengetik. Sebagai contoh sepele,2e2 = 2*10^2 = 200
Gnarlywhale
3
@Simon "segera setelah saya menulis e" , well, ya "4e" bukan angka, sedangkan misalnya "4e + 0" adalah angka yang valid (4). Jika Anda memiliki beberapa kode javascript sisi "klien" yang bekerja dengan input sebagian pengguna, Anda harus memberi waktu kepada pengguna untuk menyelesaikan pengeditan inputnya untuk memberikan nilai penuh, dan tidak ikut campur setengah dalam pengeditan. Jika Anda memiliki "undefined" dari input "4e + 0", perbaiki parser "to number" Anda. Contoh dari pertanyaan berfungsi dengan baik, melaporkan "4e + 1" sebagai kesalahan, dan "4e + 0" dikembalikan dengan benar sebagai "4e + 0" (mis. Angka antara 1 dan 5).
Ped7g
4
@Anthony Tidak, ekependekan dari Exponent.
Scott Marcus
62

Kita bisa membuatnya sangat sederhana seperti di bawah ini

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

Jawaban yang Diperbarui

kita dapat membuatnya lebih sederhana seperti yang disarankan @ 88 MPG

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

codegeek
sumber
17
Lebih baik digunakan return event.keyCode !== 69karena menghindari operator ternary yang tidak perlu. Juga tidak akan merekomendasikan inlining.
Adam Fratino
5
Ini tidak mencegah copy paste eatau Edi lapangan sekalipun
molamk
18

Jenis nomor input HTML memungkinkan "e / E" karena "e" adalah singkatan dari eksponensial yang merupakan simbol numerik.

Contoh 200000 juga dapat ditulis sebagai 2e5. Saya harap ini membantu terima kasih atas pertanyaannya.          

Anon Cypher
sumber
15

Cara terbaik untuk memaksa penggunaan nomor yang hanya terdiri dari angka:

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

ini menghindari 'e', ​​'-', '+', '.' ... semua karakter yang bukan angka!

Untuk mengizinkan hanya tombol angka:

isNaN (Number (event.key))

tapi terima "Backspace" (keyCode: 8) dan "Delete" (keyCode: 46) ...

A. Morel
sumber
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();
    }
};
Pencari kebenaran
sumber
2
Seberapa yakin Anda bahwa ini akan mencegah memasukkan karakter 'E' dengan fungsi salin dan rekat?
StephenKelzer
1
Baru diperiksa, Anda benar, itu tidak berfungsi untuk menyalin dan menempelkan masukan.
Gnarlywhale
Anda benar @StephenKelzer. Saya menambahkan kode untuk mengatasinya.
TruthSeeker
4

Untuk menyembunyikan etanda huruf dan minus, -buka saja:

onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"
Austris Cirulnieks
sumber
3

Menggunakan angular, Anda dapat melakukan ini untuk membatasi untuk memasukkan e, +, -, E

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

  }
rinku Choudhary
sumber
2
ini akan membatasi pengguna untuk memasukkan karakter itu ??
Amy
1
terima kasih atas bantuannya saya sedang mencari solusi yang sama di sudut tetapi sekarang saya punya ide bagaimana melakukannya, saya akan membuat arahan dan menyelesaikan tugas terima kasih untuk posting Anda
Amy
Anda dapat membuat arahan yang merupakan praktik terbaik. Anda juga dapat melakukannya langsung di file .ts komponen Anda!
rinku Choudhary
0

Sudut; dengan IDE keyCode peringatan usang

Secara fungsional sama dengan jawaban rinku tetapi dengan pencegahan peringatan IDE

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);
}
Simon Legg
sumber