Bagaimana membuat tag input HTML hanya menerima nilai numerik?

Question 1

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?

Question 2

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/

Question 3

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.

Question 4

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)))" />

Question 5

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.

Question 6

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

Question 7

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

Question 8

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

Question 9

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

Question 10

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!

Question 11

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/

Question 12

Bagaimana kalau menggunakan <input type="number"...>?

http://www.w3schools.com/tags/tag_input.asp

Juga, berikut adalah pertanyaan yang memiliki beberapa contoh penggunaan Javascript untuk validasi .

Pembaruan: ditautkan ke pertanyaan yang lebih baik (terima kasih alexblum).

Question 13

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>

Question 14

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

Question 15

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

Question 16

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

Question 17

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.

Question 18

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 [email protected]">
	<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

Question 19

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)"/>

Question 20

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

Question 21

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

Question 22

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>

Question 23

http://www.texotela.co.uk/code/jquery/numeric/ kredit masukan numerik untuk Leo Vũ karena menyebutkan ini dan tentu saja TexoTela. dengan halaman pengujian.

Question 24

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

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

Question 25

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);"/>

Question 26

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

Answer 1

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

stackoverflow.com/questions/469357/…

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

Kemungkinan duplikat dari input teks HTML hanya memungkinkan input numerik

emkey08

Answer 2

stackoverflow.com/questions/469357/…

alexblum

Answer 3

2

Lihatlah [tautan] [1] ini, yang memiliki cukup info. [1]: stackoverflow.com/questions/469357/…

Maheshkumar

Answer 4

Yang ini mungkin juga berguna: stackoverflow.com/questions/995183/…

Chiel ten Brinke

Answer 5

Kemungkinan duplikat dari input teks HTML hanya memungkinkan input numerik

emkey08

Answer 6

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/

Answer 7

7

Ya, ini berfungsi untuk saya di firefox dan chrome. Aneh bahwa js diperlukan untuk hal sesederhana itu.

Chiel ten Brinke

Answer 8

7

Tidak berfungsi di chrome 30. Saya sama sekali tidak kesulitan mengetik huruf ke dalam masukan "angka" Anda di biola. Hmmm ...

Ben

Answer 9

2

Bagaimana jika seseorang ingin memasukkan nilai float seperti 8,9?

syed shah

Answer 10

6

untuk solusi yang lebih kuat, pertimbangkan juga salin dan tempel dapat menambahkan huruf ke contoh ini!

Neil

Answer 11

3

Ups !! baris pertama harus diubah menjadi:var charCode = (evt.which) ? evt.which : evt.keyCode;

peiman F.

Answer 12

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

Answer 13

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

Answer 14

doctype apa yang Anda gunakan di halaman Anda?

martincarlin87

Answer 15

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

Answer 16

7

properti memungkinkan Anda memasukkan angka tetapi tidak mengirimkan formulir.

My1

Answer 17

1

KIRIM VALIDASI SAJA!

Eric Hodonsky

Answer 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)))" />

Answer 19

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

Answer 20

bagaimana cara menghapus backspace?

6by3

Answer 21

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

Answer 22

1

Tampaknya bekerja dengan sangat baik di chrome, tetapi tidak di firefox.

Chiel ten Brinke

Answer 23

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

Answer 24

Jscript di jsfiddle.net/VmtF5 , juga tidak akan berfungsi. Meskipun 1 digit berada di awal karakter, validasi gagal. Cobalah sendiri di jsfiddle

Akshay

Answer 25

@aarn Ini berfungsi untuk saya (lihat i.imgur.com/AWdmEov.png ), browser apa yang Anda gunakan?

starbeamrainbowlabs

Answer 26

@starbeamrainbowlabs Saya menggunakan firefox. Juga, masukkan 6abc, itu tidak akan menampilkan kesalahan

Akshay

Answer 27

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

Answer 28

1

Itu sebabnya saya suka regex. Terima kasih, bung, Anda benar-benar menyelamatkan hari saya

Nirmal

Answer 29

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

Answer 30

bagaimana Anda menambahkan kemampuan untuk memasukkan masukan seperti .5 atau .3?

pengguna3591637

Answer 31

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

Answer 32

1

Anda tidak dapat menghapus nomor yang dimasukkan karena kesalahan

Chris Sim

Answer 33

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

Answer 34

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!

Answer 35

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

Answer 36

1

Ketika Anda menempelkan nilai yang berisi teks, itu memungkinkan

Chris Sim

Answer 37

1

Ini memungkinkan karakter khusus juga. Misalnya: á, ã, ê, ó, è, dll.

Brad Ahrens

Answer 38

Bagaimana kalau menggunakan <input type="number"...>?

http://www.w3schools.com/tags/tag_input.asp

Juga, berikut adalah pertanyaan yang memiliki beberapa contoh penggunaan Javascript untuk validasi .

Pembaruan: ditautkan ke pertanyaan yang lebih baik (terima kasih alexblum).

Answer 39

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>

Answer 40

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

Answer 41

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

Answer 42

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

Answer 43

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.

Answer 44

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 [email protected]">
	<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

Answer 45

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)"/>

Answer 46

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

Answer 47

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

Answer 48

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

Answer 49

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>

Answer 50

1

http://www.texotela.co.uk/code/jquery/numeric/ kredit masukan numerik untuk Leo Vũ karena menyebutkan ini dan tentu saja TexoTela. dengan halaman pengujian.

Clark Superman
sumber

Answer 51

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

Answer 52

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);"/>

Answer 53

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

Bagaimana membuat tag input HTML hanya menerima nilai numerik?

Jawaban:

HTML 5

JavaScript