Menurut html5.org , atribut nilai "number" input type ", jika ditentukan dan tidak kosong, harus memiliki nilai yang merupakan angka floating point yang valid."
Namun itu sederhana (dalam versi terbaru Chrome), kontrol "pembaruan" dengan bilangan bulat, bukan mengapung:
<input type="number" id="totalAmt"></input>Apakah ada elemen input titik apung asli ke HTML5, atau cara untuk membuat tipe input angka berfungsi dengan float, bukan int? Atau haruskah saya beralih ke plugin jQuery UI?
Jawaban:
The numberjenis memiliki stepnilai pengendalian yang nomor berlaku (bersama dengan maxdan min), yang defaultnya 1. Nilai ini juga digunakan oleh implementasi untuk tombol stepper (yaitu menekan naik sebesar step).
Cukup ubah nilai ini ke apa pun yang sesuai. Untuk uang, dua tempat desimal mungkin diharapkan:
<input type="number" step="0.01">(Saya juga akan menetapkan min=0apakah hanya bisa positif)
Jika Anda lebih suka mengizinkan sejumlah tempat desimal, Anda dapat menggunakan step="any"(meskipun untuk mata uang, saya sarankan tetap berpegang pada 0.01). Di Chrome & Firefox, tombol stepper akan bertambah / berkurang 1 saat menggunakan any. (terima kasih atas jawaban Michal Stefanow untuk menunjukkan any, dan lihat spesifikasi yang relevan di sini )
Berikut ini taman bermain yang menunjukkan bagaimana berbagai langkah memengaruhi berbagai jenis input:
<form>
<input type=number step=1 /> Step 1 (default)<br />
<input type=number step=0.01 /> Step 0.01<br />
<input type=number step=any /> Step any<br />
<input type=range step=20 /> Step 20<br />
<input type=datetime-local step=60 /> Step 60 (default)<br />
<input type=datetime-local step=1 /> Step 1<br />
<input type=datetime-local step=any /> Step any<br />
<input type=datetime-local step=0.001 /> Step 0.001<br />
<input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
<input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
<input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>Seperti biasa, saya akan menambahkan catatan cepat: ingat bahwa validasi sisi klien hanyalah kenyamanan bagi pengguna. Anda juga harus memvalidasi di sisi server!
Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
Tetapi bagaimana jika Anda ingin semua angka valid, bilangan bulat dan desimal sama? Dalam hal ini, setel langkah ke "apa saja"
<input type="number" step="any" />Bekerja untuk saya di Chrome, tidak diuji di browser lain.
Kamu bisa menggunakan:
<input type="number" step="any" min="0" max="100" value="22.33">Anda dapat menggunakan atribut langkah ke nomor tipe input:
<input type="number" id="totalAmt" step="0.1"></input>step="any"akan memungkinkan desimal apa pun.
step="1"tidak akan mengizinkan desimal.
step="0.5"akan memungkinkan 0,5; 1; 1.5; ...
step="0.1"akan memungkinkan 0,1; 0,2; 0,3; 0,4; ...
Berdasarkan jawaban ini
<input type="text" id="sno" placeholder="Only float with dot !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 46 || event.charCode == 0 ">Berarti :
Kode char:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9Backspace(jika tidak, perlu menyegarkan halaman di Firefox)dot&&adalah AND, ||adalah ORoperator.
jika Anda mencoba mengapung dengan koma:
<input type="text" id="sno" placeholder="Only float with comma !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 44 || event.charCode == 0 ">Chromium dan Firefox yang Didukung (Linux X64) (browser lain saya tidak ada.)
Saya hanya memiliki masalah yang sama, dan saya bisa memperbaikinya dengan hanya meletakkan koma dan bukan titik / berhenti penuh dalam jumlah karena lokalisasi Perancis .
Jadi ini berfungsi dengan:
2 tidak apa-apa
2,5 tidak apa-apa
2.5 adalah KO (Angka ini dianggap "ilegal" dan Anda menerima nilai kosong).