HTML5: jenis input angka yang hanya mengambil bilangan bulat?

250

Saya menggunakan Validator Alat jQuery yang mengimplementasikan validasi HTML5 melalui jQuery. Sejauh ini sudah bekerja dengan baik kecuali untuk satu hal. Dalam spesifikasi HTML5, tipe input "angka" dapat memiliki bilangan bulat dan angka floating-point. Ini tampaknya sangat picik karena itu hanya akan menjadi validator berguna ketika bidang database Anda ditandatangani angka floating-point (untuk int unsigned Anda harus kembali ke validasi "pola" dan dengan demikian kehilangan fitur tambahan seperti naik dan turun panah untuk browser yang mendukungnya). Apakah ada tipe input lain atau mungkin atribut yang akan membatasi input hanya pada bilangan bulat yang tidak ditandatangani? Saya tidak dapat menemukannya, terima kasih.

EDIT

Ok, teman-teman, saya menghargai waktu dan bantuan Anda, tetapi saya melihat banyak pemilihan yang tidak selayaknya terjadi: D. Mengatur langkah ke 1 bukanlah jawaban karena tidak membatasi input. Anda masih bisa mengetikkan angka titik-mengambang negatif ke dalam kotak teks. Juga, saya mengetahui validasi pola (saya sebutkan di posting asli saya), tapi itu bukan bagian dari pertanyaan. Saya ingin tahu apakah HTML5 diizinkan membatasi input tipe "angka" ke nilai integer positif. Untuk pertanyaan ini, jawabannya adalah "tidak, tidak". Saya tidak ingin menggunakan validasi pola karena ini menyebabkan beberapa kelemahan saat menggunakan validasi jQuery Tools, tetapi sekarang tampaknya spesifikasi tidak memungkinkan cara yang lebih bersih untuk melakukan ini.

jquery html validation jquery-tools Jayea
sumber
3
Mulai 2019 — saya tidak tahu sejak kapan — numberinput (setidaknya dalam FF / Chrome / Safari) sekarang hanya menerima integer secara default, kecuali jika Anda menetapkan nilai eksplisit untuk stepattr yang memungkinkan nilai desimal; misalnya: step="0.01". MDN yang didokumentasikan di sini . Dalam dua pikiran tentang ini karena saya pikir ini adalah default yang masuk akal, tetapi juga perubahan yang melanggar (ya, itu telah mempengaruhi beberapa kode yang saya tulis).
Darragh Enright

Jawaban:

326

https://www.w3.org/wiki/HTML/Elements/input/number

Yang terbaik yang dapat Anda capai dengan HTML saja

<input type="number" min="0" step="1"/>
Luaskan cuplikan

Aurélien Ooms
sumber
6
Anda mungkin harus mengatur minuntuk 1karena ia ingin angka positif (dan nomor tidak non-negatif).
Martin Thoma
1
@ pwdst saya akan kedua itu. <input type="number" min="0" step="1"/>adalah jawaban yang paling benar untuk pertanyaan itu. Lagi pula, apa gunanya memiliki keduanya step="1"dan pattern="\d+"? Saya tidak bisa mengetikkan angka floating point dalam kedua kasus.
Danish Ashfaq
27
Ini tidak berfungsi untuk saya pada versi chrome terbaru. Itu tidak memungkinkan huruf untuk diketik, tetapi memang memungkinkan karakter khusus untuk dimasukkan.
Malavos
2
Mengapa saya bisa mengetikkan e
grant sun
4
@grantsun untuk nomor eksponensial misalnya 10e20.
sn3ll
181

Setel stepatribut ke 1:

<input type="number" step="1" />

Sepertinya ini agak buggy di Chrome saat ini sehingga mungkin bukan solusi terbaik saat ini.

Solusi yang lebih baik adalah dengan menggunakan patternatribut, yang menggunakan ekspresi reguler untuk mencocokkan input:

<input type="text" pattern="\d*" />

\dadalah ungkapan reguler untuk angka, *artinya ia menerima lebih dari satu. Ini adalah demo: http://jsfiddle.net/b8NrE/1/

js-coder
sumber
2
Seperti yang dipelajari JayPea, belum semua browser mendukung semua elemen HTML5, jadi yang terbaik adalah memberikan penurunan kualitas, seperti yang telah Anda usulkan.
DOK
6
@Zut HTML5 validasi tidak menghentikan Anda dari memasukkan kunci-kunci itu. Itu hanya mencegah formulir agar tidak dikirim bersama karakter-karakter itu. Jika Anda mengirimkan formulir dengan input tipe numberyang berisi karakter lain, maka Chrome akan menampilkan pesan kesalahan kepada Anda.
js-coder
2
@ debweb - Saya mengerti maksud Anda. Perbedaan antara keduanya adalah bahwa dengan atribut angka, semua karakter alfabet secara otomatis dihapus ketika saya batal memilih (trigger blur) untuk input. Ini tidak terjadi ketika menggunakan atribut pola. Saya kira perbedaan ini hanya penting jika Anda menggunakan AJAX untuk memposting data Anda, dan Anda menggunakan beberapa acara selain submituntuk memicu posting.
Zut
6
Ini tidak melakukan apa yang diminta OP. Hanya bilangan bulat /\d*/.test(1.1) // true
vsync
2
@vsync pattern="\d*"tidak sama dengan /\d*/, pattern="\d*"sama dengan /^(?:\d*)$/, silakan lihat dokumentasi atribut pola HTML5 .
Wiktor Stribiżew
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Menggunakan kode ini, input ke bidang teks membatasi untuk memasukkan hanya digit. Pola adalah atribut baru yang tersedia dalam HTML 5.

Atribut atribut pola

thejustv
sumber
9
Menurut spesifikasi , atribut pattern hanya dapat digunakan di mana tipe inputnya adalah Teks, Cari, URL, Telepon, Email, Kata Sandi (seperti yang ditunjukkan di sini dengan tipe "Teks"). Ini berarti semantik dari tipe input angka dan karenanya (penting) keyboard numerik di layar beberapa tablet dan ponsel hilang ketika menggunakan metode ini.
pwdst
3
Ini pada firefox 36.0 memungkinkan Anda mengetik huruf dan karakter khusus.
Malavos
1
Itu tidak membatasi input hanya ke angka, Anda masih bisa mengetik huruf!
HadidAli
35

Cara mudah menggunakan JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
Tarek Kalaji
sumber
Saya tidak mengertireplace(/(\..*)\./g, '$1')
codyc4321
3
Ini penting untuk menerima angka float dan .hanya mengulangi sekali, misalnya 123.556dapat ditulis.
Tarek Kalaji
8
@ TarekKalaji - pertanyaan menyatakan bilangan bulat dan bukan angka float
vsync
bagaimana dengan perangkat seluler? karena ketik teks menampilkan semua keyboard (karakter alfanumerik juga)
Nuri YILMAZ
27

Polanya bagus tetapi jika Anda ingin membatasi input hanya ke angka dengan type = "text", Anda dapat menggunakan input dan input seperti di bawah ini:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Saya suka untuk saya :)

Viktor Karpyuk
sumber
Berhati-hatilah bahwa pendekatan ini dapat meniadakan metode (perubahan) Anda (pengendali event) dan juga menghapus nilai default Anda di kotak input.
HadidAli
14

Ini tidak hanya untuk HTML5 semua browser berfungsi dengan baik. coba ini 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
Leopard
sumber
12
Ini buruk. Pada input yang coba: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. Gunakan oninputsebagai gantinya
zanderwar
1
Ketika jawaban ini ditulis, HTML5 tidak dipublikasikan. @zanderwar
Muhammet Can TONBUL
11

Pola selalu lebih disukai untuk pembatasan, coba oninputdan lakukan min1 untuk memasukkan hanya angka dari 1 dan seterusnya

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
Noothan yv
sumber
Ini adalah solusi yang sangat instresting. Untuk apa `value = $ {var}` itu?
Pengembang
@AcademyofProgrammer contoh nilai default untuk input itu
Shinigamae
jawaban Terbaik! berfungsi untuk menempel, bekerja bahkan di IE (10+), memberi Anda kebebasan untuk menampilkan keyboard apa pun melalui tipe input, dan tidak membuat chrome menampilkan panah naik / turun sial di dalam bidang ini.
Janosch
5

sudahkah Anda mencoba mengatur stepatribut ke 1 seperti ini

<input type="number" step="1" />
DevTeamExpress
sumber
4

Mungkin tidak cocok untuk setiap use case, tetapi

<input type="range" min="0" max="10" />

dapat melakukan pekerjaan dengan baik: biola .

Periksa dokumentasinya .

Luca Fagioli
sumber
3

Ya, HTML5 tidak. Coba kode ini ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Lihat paremeter min dan maks? Saya mencobanya menggunakan Chrome 19 (berhasil) dan Firefox 12 (tidak berhasil).

wilsonfoz
sumber
Ini mengasumsikan bahwa Anda ingin rentang yang diketahui. Tetapi jika Anda ingin setiap nilai integer, akan ini masih bekerja?
RandomHandle
3

Masukkan saja ke dalam kolom input Anda: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

ilegal
sumber
3

Saya bekerja oh Chrome dan memiliki beberapa masalah, meskipun saya menggunakan atribut html. Saya berakhir dengan kode js ini

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
a.valchev
sumber
Saya akhirnya menggunakan ini juga dengan 1 tweak kecil; Saya mengubah parseInt (value) menjadi parseInt (value.replace ('.', ''). Hal ini memungkinkan saya untuk menempelkan 1,56 dan mempertahankan nilai yang ditampilkan pada 156 alih-alih 1.
codescribblr
2

Dari spesifikasi

step="any"atau angka floating-point positif
Menentukan granularitas nilai dari nilai elemen.

Jadi Anda bisa mengaturnya ke 1:

David Hedlund
sumber
8
Saya sudah mencoba ini tetapi masalahnya adalah Anda masih bisa mengetik nomor floating point di kotak teks.
JayPea
Jadi, Anda perlu kode yang memblokir pengguna dari mengetik titik desimal?
Blazemonger
2

Setel stepatribut ke sembarang nomor float, misal 0,01 dan Anda siap melakukannya.

Mantas K.
sumber
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
Sarthak
sumber
0

Saat ini, tidak mungkin untuk mencegah pengguna dari menulis nilai desimal di input Anda hanya dengan HTML. Anda harus menggunakan javascript.

Michal
sumber
0 

<input type="number" oninput="this.value = Math.round(this.value);"/>
Luaskan cuplikan

R. Yaghoobi
sumber
-2

Di Future ™ (lihat Dapatkah Saya Menggunakan ), pada agen pengguna yang menyajikan keyboard untuk Anda, Anda dapat membatasi input teks hanya dengan angka input[inputmode].

Weston
sumber
inputmodesebagian besar untuk perangkat genggam dan akan memicu tata letak keyboard yang benar, tetapi untuk komputer "normal" dengan keyboard, itu tidak akan mencegah memasuki apa pun yang Anda inginkan.
vsync