Bagaimana membuat tag input HTML hanya menerima nilai numerik?

146

Saya perlu memastikan bahwa <input>bidang tertentu hanya menerima angka sebagai nilai. Masukan bukan bagian dari formulir. Karenanya itu tidak dapat dikirim, jadi memvalidasi selama pengiriman bukanlah suatu pilihan. Saya ingin pengguna tidak dapat mengetikkan karakter apa pun selain angka.

Adakah cara yang tepat untuk mencapai ini?

html  input  numbers  validating 
— Chiel ten Brinke
sumber
— alexblum
2
Lihatlah [tautan] [1] ini, yang memiliki cukup info. [1]: stackoverflow.com/questions/469357/…
— Maheshkumar
Yang ini mungkin juga berguna: stackoverflow.com/questions/995183/…
— Chiel ten Brinke
— emkey08

Jawaban:

286

HTML 5

Anda dapat menggunakan nomor jenis masukan HTML5 untuk membatasi hanya entri nomor:

<input type="number" name="someid" />

Ini hanya akan berfungsi di browser keluhan HTML5. Pastikan doctype dokumen html Anda adalah:

<!DOCTYPE html>

Lihat juga https://github.com/jonstipe/number-polyfill untuk dukungan transparan di browser lama.

JavaScript

Pembaruan: Ada solusi baru dan sangat sederhana untuk ini:

Ini memungkinkan Anda untuk menggunakan segala jenis filter input pada teks <input>, termasuk berbagai filter numerik. Ini akan menangani dengan benar Salin + Tempel, Seret + Jatuhkan, pintasan keyboard, operasi menu konteks, tombol yang tidak dapat diketik, dan semua tata letak keyboard.

Lihat jawaban ini atau coba sendiri di JSFiddle .

Untuk tujuan umum, Anda dapat memiliki validasi JS seperti di bawah ini:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Jika Anda ingin mengizinkan desimal, ganti "jika kondisi" dengan ini:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Sumber: Input teks HTML hanya mengizinkan input numerik

Demo JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/

— Viral Patel
sumber
7
Ya, ini berfungsi untuk saya di firefox dan chrome. Aneh bahwa js diperlukan untuk hal sesederhana itu.
— Chiel ten Brinke
7
Tidak berfungsi di chrome 30. Saya sama sekali tidak kesulitan mengetik huruf ke dalam masukan "angka" Anda di biola. Hmmm ...
— Ben
2
Bagaimana jika seseorang ingin memasukkan nilai float seperti 8,9?
— syed shah
6
untuk solusi yang lebih kuat, pertimbangkan juga salin dan tempel dapat menambahkan huruf ke contoh ini!
— Neil
3
Ups !! baris pertama harus diubah menjadi:var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
39

Anda juga dapat menggunakan atribut pola di html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Tutorial validasi masukan

Meskipun, jika doctype Anda tidak, htmlsaya pikir Anda perlu menggunakan beberapa javascript / jquery.

— martincarlin87
sumber
4
Meskipun firefox memberi kotak input batas merah ketika non-angka diketik, baik di firefox maupun chrome, Anda dapat mengetikkan karakter non-angka di kotak input.
— Chiel ten Brinke
doctype apa yang Anda gunakan di halaman Anda?
— martincarlin87
ok, mungkin tidak didukung di versi browser yang Anda miliki? Tidak 100% yakin tetapi jujur ​​saya akan menggunakan beberapa js untuk memvalidasi juga, saya tidak akan hanya mengandalkan html5 saat ini
— martincarlin87
7
properti memungkinkan Anda memasukkan angka tetapi tidak mengirimkan formulir.
— My1
1
KIRIM VALIDASI SAJA!
— Eric Hodonsky
18

Kode Cepat dan Mudah

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Ini akan mengizinkan penggunaan angka dan backspace saja.

Jika Anda membutuhkan bagian desimal juga, gunakan fragmen kode ini

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
— abhijithvijayan.dll
sumber
14

Silakan coba kode ini bersama dengan bidang masukan itu sendiri

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

itu akan bekerja dengan baik.

— subindas pm
sumber
bagaimana cara menghapus backspace?
— 6by3
7

Anda bisa menggunakan <input type="number" />. Ini hanya akan memungkinkan nomor untuk dimasukkan ke dalam kotak masukan lainnya.

Contoh: http://jsfiddle.net/SPqY3/

Harap dicatat bahwa type="number"tag input hanya didukung di browser yang lebih baru.

Untuk firefox, Anda dapat memvalidasi input dengan menggunakan javascript:

http://jsfiddle.net/VmtF5/

Perbarui 2018-03-12: Dukungan browser jauh lebih baik sekarang didukung oleh yang berikut ini:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Tepi
  • (Internet Explorer 10+)
— starbeamrainbowlabs
sumber
1
Tampaknya bekerja dengan sangat baik di chrome, tetapi tidak di firefox.
— Chiel ten Brinke
Ah. Itu karena firefox tidak mendukung input type = number. Alternatifnya, Anda dapat menggunakan beberapa javascript untuk memvalidasi masukan saat pengguna memasukkan teks. Jawaban diperbarui.
— starbeamrainbowlabs
Jscript di jsfiddle.net/VmtF5 , juga tidak akan berfungsi. Meskipun 1 digit berada di awal karakter, validasi gagal. Cobalah sendiri di jsfiddle
— Akshay
@aarn Ini berfungsi untuk saya (lihat i.imgur.com/AWdmEov.png ), browser apa yang Anda gunakan?
— starbeamrainbowlabs
@starbeamrainbowlabs Saya menggunakan firefox. Juga, masukkan 6abc, itu tidak akan menampilkan kesalahan
— Akshay
6

Saya telah menggunakan ekspresi reguler untuk mengganti nilai input dengan pola yang diperlukan.

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">
Luaskan cuplikan

— Shaktish
sumber
1
Itu sebabnya saya suka regex. Terima kasih, bung, Anda benar-benar menyelamatkan hari saya
— Nirmal
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

dan di js:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

atau Anda dapat menuliskannya dengan cara yang rumit tetapi bermanfaat:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

Catatan : lintas-browser dan regex secara literal.

— Fredrick Gauss
sumber
bagaimana Anda menambahkan kemampuan untuk memasukkan masukan seperti .5 atau .3?
— pengguna3591637
Kemudian Anda harus mempertimbangkan karakter pertama dan kedua ( 0.43atau .43) yang dapat dilakukan dengan memeriksa nilai input saat ini ditambah tombol yang ditekan. Ini akan menjadi jelek dalam kode satu baris, saya sarankan menggunakan fungsi untuk ini. Untuk menguji integer atau float, periksa di sini .
— Fredrick Gauss
1
Anda tidak dapat menghapus nomor yang dimasukkan karena kesalahan
— Chris Sim
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup terpicu saat kunci dilepaskan.

isNaN(parseFloat(value))? memeriksa apakah nilai input bukan angka.

Jika bukan angka, nilai disetel ke 1000. :Jika angka, nilai disetel ke nilai.

Catatan: Untuk beberapa alasan, ini hanya berfungsi dengantype="number"

Untuk membuatnya lebih menarik, Anda juga dapat memiliki batasan:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

Nikmati!

— pengguna40521
sumber
4

Saya bertarung dengan yang ini sebentar. Banyak solusi di sini dan di tempat lain tampak rumit. Solusi ini menggunakan jQuery / javascript bersama HTML.

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

Dalam kasus saya, saya melacak jumlah kecil dengan nilai minimum 1, maka min = "1" di tag input dan abc = 1 di cek isNaN (). Untuk bilangan positif saja Anda dapat mengubah nilai tersebut menjadi 0 dan bahkan cukup menghapus min = "1" dari tag input untuk memungkinkan bilangan negatif.

Ini juga berfungsi untuk beberapa kotak (dan dapat menghemat waktu muat untuk melakukannya satu per satu menurut id), cukup tambahkan kelas "validateNumber" jika diperlukan.

Penjelasan

parseInt () pada dasarnya melakukan apa yang Anda butuhkan, kecuali bahwa ia mengembalikan NaN daripada beberapa nilai integer. Dengan if () sederhana Anda dapat menyetel nilai "fallback" yang Anda inginkan dalam semua kasus, NaN dikembalikan :-). Juga W3 menyatakan di sini bahwa versi global NaN akan mengetik cast sebelum pemeriksaan yang memberikan beberapa pemeriksaan tambahan (Number.isNaN () tidak melakukan itu). Nilai apa pun yang dikirim ke server / backend harus tetap divalidasi di sana!

— Yesaya
sumber
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
Luaskan cuplikan

JSFiddle: https://jsfiddle.net/ug8pvysc/

— Sameh Saeed
sumber
1
Ketika Anda menempelkan nilai yang berisi teks, itu memungkinkan
— Chris Sim
1
Ini memungkinkan karakter khusus juga. Misalnya: á, ã, ê, ó, è, dll.
— Brad Ahrens
3

Saya menggunakan ini untuk Kode Pos, cepat dan mudah.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— Justin Buser
sumber
3

jika Anda dapat menggunakan HTML5 Anda dapat melakukannya <input type="number" /> Jika tidak Anda harus melakukannya baik melalui javascript seperti yang Anda katakan itu tidak mendapatkan dikirimkan untuk melakukannya dari codebehind.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

PS tidak menguji kode tetapi seharusnya lebih atau kurang benar jika tidak memeriksa kesalahan ketik: D Anda mungkin ingin menambahkan beberapa hal lagi seperti apa yang harus dilakukan jika stringnya nol atau kosong dll. Anda juga dapat membuat ini lebih cepat: D

— czioutas
sumber
2

jika tidak, set bilangan bulat 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— websky
sumber
2

Jawaban yang diterima:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Itu bagus tapi tidak sempurna. Ini berhasil untuk saya, tetapi saya mendapat peringatan bahwa pernyataan-if dapat disederhanakan.

Maka akan terlihat seperti ini, yang jauh lebih cantik:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

Akan mengomentari postingan asli, tetapi reputasi saya terlalu rendah untuk melakukannya (baru saja membuat akun ini).

— Chris H.
sumber
2

Anda dapat menggunakan <input>tag dengan tipe atribut = 'number'.

Misalnya Anda bisa menggunakan <input type='number' />

Bidang masukan ini hanya mengizinkan nilai numerik. Anda juga dapat menentukan nilai minimum dan nilai maksimum yang harus diterima oleh bidang ini.

— Geeth Chadalawada
sumber
2

Silakan lihat proyek saya tentang nilai filter lintas-browser dari elemen input teks pada halaman web Anda menggunakan bahasa JavaScript: Filter Kunci Input . Anda dapat memfilter nilai sebagai angka integer, angka float, atau menulis filter kustom, seperti filter nomor telepon. Lihat contoh kode masukan bilangan bulat:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>
Luaskan cuplikan

Lihat juga halaman saya "bidang Integer:" dari contoh filter kunci masukan

— Andrej
sumber
2

Untuk tujuan umum, Anda dapat memiliki validasi JS seperti di bawah ini:

Ini akan bekerja untuk keypad Numerik dan tombol angka normal 

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
— YasirPoongadan
sumber
2

Tambahkan di dalam tag input Anda: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— Naveen Kumar
sumber
2
Selamat datang di SO! Sayangnya, ini adalah pertanyaan berusia 5 1/2 tahun yang sudah memiliki jawaban yang diterima. Anda mungkin ingin menelusuri pertanyaan tanpa jawaban di sini: stackoverflow.com/unanswered
— JoshG
2

Saya memperbarui beberapa jawaban yang diposting untuk menambahkan yang berikut ini:

  • Tambahkan metode sebagai metode ekstensi
  • Izinkan hanya satu poin untuk dimasukkan

  • Tentukan berapa banyak angka yang diperbolehkan setelah koma desimal.

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
— Plexis Plexis
sumber
1

Saat menggunakan kode ini, Anda tidak dapat menggunakan "BackSpace Button" di Mozilla Firefox, Anda hanya dapat menggunakan backspace di Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "wajib>

— Wendell Alvarez
sumber
0

Lebih baik menambahkan "+" ke kondisi REGEX untuk menerima banyak digit (tidak hanya satu digit):

<input type="text" name="your_field" pattern="[0-9]+">

— Dashko Leonid
sumber
0

Salah satu caranya adalah dengan memiliki larik kode karakter yang diizinkan dan kemudian menggunakan Array.includesfungsi tersebut untuk melihat apakah karakter yang dimasukkan diizinkan.

Contoh:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
— MA1
sumber
0

Cukup sederhana?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Luaskan cuplikan

— Normajean
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.