Apakah ada tipe input mengambang di HTML5?

819

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?

B. Clay Shannon
sumber

Jawaban:

1663

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!

Dave
sumber
1
Untuk menanggapi edit @ Elfayer: kutipan bersifat opsional dalam HTML kecuali jika Anda ingin menggunakan karakter tertentu. Secara pribadi saya lebih suka menghilangkannya jika memungkinkan untuk keterbacaan yang lebih baik.
Dave
5
Ini tidak berfungsi dengan benar di versi terbaru Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him
7
@ Dave: Ya, secara teknis, menghilangkan tanda kutip baik-baik saja, gigit memperkenalkan sejumlah masalah potensial. Pertama, subset karakter ditangani secara berbeda di browser dan versi yang berbeda. Jika Anda memilih untuk tidak menggunakan tanda kutip, maka Anda harus terus-menerus mengetahui karakter mana yang akan menyebabkan masalah di setiap browser dan versi. Itu banyak kekuatan mental yang ditujukan untuk sesuatu yang tidak perlu dikhawatirkan sama sekali jika Anda hanya menggunakan kutipan. (lanjt.)
Chris Pratt
9
Kedua, sementara Anda mungkin baik-baik saja dengan mengkhawatirkan aturan karakter mana yang baik dan mana yang tidak, pengembang yang mendukung Anda mungkin tidak akan melakukannya. Itu kemudian mengharuskan mereka baik menanggung tugas berat menambahkan tanda kutip ke semua atribut yang Anda kutip tanpa tanda kutip atau lebih buruk, cukup masukkan masalah ke dalam kode yang mereka bahkan mungkin tidak mengerti sumbernya. Akhirnya, karena kadang-kadang Anda harus menggunakan tanda kutip, kode kemudian terlihat tidak konsisten dengan beberapa atribut yang dikutip dan yang lainnya tidak.
Chris Pratt
2
@relipse lihat di sini: stackoverflow.com/q/3790935/1180785 tetapi pastikan untuk membaca komentar untuk setiap jawaban; sepertinya semua opsi memiliki kekurangan, dan Anda harus melihat apa yang sesuai dengan kebutuhan khusus Anda.
Dave
153

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.

Mars Robertson
sumber
4
Chrome => Bekerja dengan sempurna Safari => Tidak akan menampilkan pesan kesalahan, dan jika tidak nomor itu tidak akan lolos ke server IE => Versi kurang dari 10 tidak, berfungsi
Abhi
4
Sayangnya di chrome, Anda dapat memasukkan beberapa titik desimal, misalnya alamat IP.
Andy
18

Kamu bisa menggunakan:

<input type="number" step="any" min="0" max="100" value="22.33">
alvarodoune
sumber
12

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

Andrei Thuler
sumber
8

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:

  • 48-57 sama dengan 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • 0 adalah Backspace(jika tidak, perlu menyegarkan halaman di Firefox)
  • 46 adalah 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.)

dsgdfg
sumber
Terasa mundur. Bagaimana dengan salin & tempel di bidang?
Mars Robertson
4
Retas untuk masukan, retas untuk salin & tempel, retas di atas retasan = praktik buruk. Kami memiliki 2017
Mars Robertson
Di mana Anda membaca input kata sandi? Siapa yang peduli metode mana yang digunakan setelah sesi? Tidak, kami memiliki 1856! Coba pengguna lain!
dsgdfg
Kedengarannya terlalu rumit, tetapi, penalaran tentang metode ini dibandingkan yang lain tidak disediakan
WebDude0482
6

Saya melakukannya

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

kemudian, saya mendefinisikan min dalam 0,4 dan maks dalam 0,7 dengan langkah 0,01: 0,4, 0,41, 0,42 ... 0,7

sadalsuud
sumber
4

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).

Stephane
sumber
3
tambahkan lang = "en" untuk memasukkan atau orang tua mana pun dan itu akan mulai menggunakan gaya angka bahasa Inggris
user1040495