Kaip leisti tik skaitmeninį (0-9) HTML įvesties lauke naudojant jQuery?

Sukuriu tinklalapį, kuriame turiu įvesties teksto lauką, kuriame noriu leisti tik skaitmeninius simbolius (0,1,2,3,4,5 ... 9) 0-9.

Kaip tai padaryti su jQuery?

833
15 июня '09 в 12:22 2009-06-15 12:22 Prashant paklausė birželio 15 d. 12 val. 12:22 2009-06-15 12:22
@ 67 atsakymai
  • 1
  • 2
  • 3

Jquery

Pastaba Tai atnaujintas atsakymas. Toliau pateiktose pastabose nurodoma senoji versija, kuri painiojama su pagrindiniais kodais.

Toliau pateikto scenarijaus įvesties filtras leidžia naudoti bet kokį įvesties filtrą <input> tekstui, įskaitant įvairius skaitmeninius filtrus. Jis teisingai tvarkys „Copy + Paste“, „Drag + Drop“, sparčiuosius klaviatūros klavišus, kontekstinio meniu operacijas, nespausdinamus raktus, žymeklio padėtį, visas klaviatūros išdėstymus ir visas naršykles, pradedant nuo IE 9 . Atkreipkite dėmesį, kad vis tiek turite atlikti serverio patikrinimą!

Išbandykite save „JSFiddle“ .

 // Restricts input for each element in the set of matched elements to the given inputFilter. (function($) { $.fn.inputFilter = function(inputFilter) { return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() { if (inputFilter(this.value)) { this.oldValue = this.value; this.oldSelectionStart = this.selectionStart; this.oldSelectionEnd = this.selectionEnd; } else if (this.hasOwnProperty("oldValue")) { this.value = this.oldValue; this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); } }); }; }(jQuery)); 

Naudoti:

 // Restrict input to digits by using a regular expression filter. $("#myTextBox").inputFilter(function(value) { return /^\d*$/.test(value); }); 

Kai kurie įvesties filtrai, kuriuos galite naudoti:

  • Bendrosios vertės (teigiamos ir neigiamos):
    /^-?\d*$/.test(value)
  • Bendrosios vertės (tik teigiamos):
    /^\d*$/.test(value)
  • Bendrosios vertės (teigiamos ir iki tam tikros ribos):
    /^\d*$/.test(value) (value === "" || parseInt(value) <= 500)
  • Plaukiojančio taško reikšmės (leidžiama kaip . Ir dešimtainis skyriklis):
    /^-?\d*[.,]?\d*$/.test(value)
  • Valiutos vertės (t. Y. Ne daugiau kaip dvi dešimtosios tikslumo vietos):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • Heksadeciminės reikšmės:
    /^[0-9a-f]*$/i.test(value)

Išvalykite javascript

JQuery tai tikrai nereikia, tai galite padaryti su grynu javascript. Žr. Šį atsakymą arba pabandykite patys JSFiddle .

HTML 5

HTML 5 turi savo sprendimą su <input type="number"> (žr. Specifikaciją ), tačiau atkreipkite dėmesį, kad naršyklės palaikymas skiriasi:

  • Dauguma naršyklių tikrina įvestį tik pateikus formą, o ne įvedant.
  • Dauguma mobiliųjų naršyklių nepalaiko step , min ir max .
  • „Chrome“ (versija 71.0.3578.98) vis dar leidžia vartotojui įvesti e ir E simbolius lauke. Taip pat žr. Šį klausimą .
  • „Firefox“ (64.0 versija) ir „Edge“ („EdgeHTML“ versija 17.17134) vis tiek leidžia vartotojui įvesti bet kurį teksto lauką.

Išbandykite save adresu w3schools.com .

Išplėstinės nuskaitymo parinktys

Jei norite atlikti kitus bandinius, tai gali būti patogu:

1172
15 июня '09 в 12:26 2009-06-15 12:26 atsakymą pateikė kgiannakakis birželio 15 d. , 09:26 , 2009-06-15 12:26

Čia yra funkcija, kurią naudoju:

 // Numeric only control handler jQuery.fn.ForceNumericOnly = function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY // home, end, period, and numpad decimal return ( key == 8 || key == 9 || key == 13 || key == 46 || key == 110 || key == 190 || (key >= 35  key <= 40) || (key >= 48  key <= 57) || (key >= 96  key <= 105)); }); }); }; 

Tada galite pridėti jį prie savo valdymo:

 $("#yourTextBoxName").ForceNumericOnly(); 
165
08 марта '10 в 19:57 2010-03-08 19:57 atsakymą įteikė Kelsey , kovo 8 d., 10 d., 19:57, 2010-03-08 19:57

Inline:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="number"> 
129
05 июня '11 в 6:43 2011-06-05 06:43 atsakymą Patrick Fisher pateikė birželio 5 d. 11 d. 6:43 2011-06-05 06:43

Paprastai naudodami paprastą „JavaScript“ išraišką galite patikrinti tik skaitmeninius simbolius:

 /^[0-9]+$/.test(input); 

Grąžinamas tiesa, jei įvestis yra skaitinė arba klaidinga, jei ne.

arba pagrindinio įvykio kodo atveju, paprasta naudoti toliau:

  // Allow: backspace, delete, tab, escape, enter, ctrl+A and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A (e.keyCode == 65  e.ctrlKey === true) || // Allow: home, end, left, right (e.keyCode >= 35  e.keyCode <= 39)) { // let it happen, don't do anything return; } var charValue = String.fromCharCode(e.keyCode) , valid = /^[0-9]+$/.test(charValue); if (!valid) { e.preventDefault(); } 
100
17 февр. Atsakymą pateikė TheDeveloper 17 vasaris. 2010-02-17 20:55 '10 at 20:55 2010-02-17 20:55

Šį įvesties įvykį galite naudoti taip:

 $(document).on("input", ".numeric", function() { this.value = this.value.replace(/\D/g,''); }); 

Bet kas yra šio kodo privilegija?

  • Jis veikia mobiliesiems naršyklėms (problemos, susijusios su keydown ir keyCode).
  • Jis taip pat veikia su sukurtu AJAX turiniu, nes naudojame „įjungta“.
  • Geresnis našumas nei keydown, pavyzdžiui, įklijuojant.
70
14 авг. Hamid Afarinesh Far atsakymas 14 rug . 2015-08-14 10:27 '15 at 10:27 2015-08-14 10:27

Naudokite javascript isNaN funkciją,

 if (isNaN($('#inputid').val())) 

jei (isNaN (document.getElementById ('inputid'). val ()))

 if (isNaN(document.getElementById('inputid').value)) 

Atnaujinimas: ir čia yra geras straipsnis apie tai, bet naudojant jQuery: HTML teksto laukų įvedimo apribojimas skaitmeninėmis reikšmėmis

43
08 марта '10 в 20:00 2010-03-08 20:00 atsakymą pateikė Amr Elgarhy kovo 8 d. 10 val. 20:00 2010-03-08 20:00

Trumpas ir saldus - net jei jis po 30+ atsakymų niekada nesulauks daug dėmesio;)

  $('#number_only').bind('keyup paste', function(){ this.value = this.value.replace(/[^0-9]/g, ''); }); 
42
24 февр. Atsakymas pateikiamas Rid Iculous 24 vasario mėn. 2016-02-24 05:58 '16 at 5:58 am 2016-02-24 05:58
 $(document).ready(function() { $("#txtboxToFilter").keydown(function(event) { // Allow only backspace and delete if ( event.keyCode == 46 || event.keyCode == 8 ) { // let it happen, don't do anything } else { // Ensure that it is a number and stop the keypress if (event.keyCode < 48 || event.keyCode > 57 ) { event.preventDefault(); } } }); }); 

Šaltinis: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

27
15 июня '09 в 12:26 2009-06-15 12:26 Atsakymą pateikė Ivaras birželio 15 d., 09:26, 2009-06-15 12:26

Naudoju tai mūsų vidiniame js faile. Aš tiesiog pridedu klasę prie bet kokio įėjimo, kuriam reikia.

 $(".numericOnly").keypress(function (e) { if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false; }); 
26
14 февр. Atsakymas, kurį pateikė Mike Chu vasario 14 d 2011-02-14 22:47 '11 at 22:47 2011-02-14 22:47

Man paprasta -

 jQuery('.plan_eff').keyup(function () { this.value = this.value.replace(/[^1-9\.]/g,''); }); 
25
02 апр. atsakymą pateikė Summved Jain 02 Bal 2012-04-02 14:20 '12 at 14:20 pm 2012-04-02 14:20

Kodėl taip sunku? Net nereikia jQuery, nes yra HTML5 šablono atributas:

 <input type="text" pattern="[0-9]*"> 

Įdomiausia yra tai, kad ji skambina skaitmeninėmis klaviatūromis mobiliuosiuose įrenginiuose, o tai yra daug geriau nei naudojant jQuery.

20
29 окт. atsakymas suteiktas svečiui 29 spalio. 2014-10-29 22:27 '14, 22:27 pm 2014-10-29 22:27

Jūs galite padaryti tą patį naudodami šį labai paprastą sprendimą.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="numbers" name="field_name" /> 

Šią nuorodą nurodiau sprendžiant. Tai puikiai veikia !!!

16
30 июля '14 в 14:35 2014-07-30 14:35 atsakymą pateikė Ganešo Babu liepos 14 d. 14, 14:35 2014-07-30 14:35

HTML5 modelio atributas rodo reguliarią išraišką, kuri tikrinama pagal elemento vertę.

  <input type="text" pattern="[0-9]{1,3}" value="" /> 

Pastaba Rašto atributas veikia su šiais įvesties tipais: tekstas, paieška, URL, telefonas, el. Paštas ir slaptažodis.

  • [0-9] gali būti pakeista bet kokia įprastine išraiška.

  • {1,3} reiškia mažiausiai 1 ir ne daugiau kaip 3 skaitmenis.

14
19 янв. atsakymą pateikė vickisys 19 sausis 2015-01-19 15:11 '15 15:11 2015-01-19 15:11

Galite išbandyti HTML5 numerį :

 <input type="number" value="0" min="0"> 

Nesuderinamoms naršyklėms yra „ Modernizr“ ir „ Webforms2“ .

13
23 дек. Atsakymą pateikė Vitalii Fedorenko 23 d. 2011-12-23 01:36 '11 ne 1:36 2011-12-23 01:36

Kažkas gana paprasta naudojant jQuery.validate

 $(document).ready(function() { $("#formID").validate({ rules: { field_name: { numericOnly:true } } }); }); $.validator.addMethod('numericOnly', function (value) { return /^[0-9]+$/.test(value); }, 'Please only enter numeric values (0-9)'); 
11
25 февр. Atsakymą pateikė Adrianas vasario 25 d. 2011-02-25 02:35 '11 at 2:35 am 2011-02-25 02:35

SuppressNonNumericInput funkcija (įvykis) {

  if( !(event.keyCode == 8 // backspace || event.keyCode == 46 // delete || (event.keyCode >= 35  event.keyCode <= 40) // arrow keys/home/end || (event.keyCode >= 48  event.keyCode <= 57) // numbers on keyboard || (event.keyCode >= 96  event.keyCode <= 105)) // number on keypad ) { event.preventDefault(); // Prevent character input } } 
8
12 июля '10 в 23:38 2010-07-12 23:38 atsakymą pateikė vartotojo261922 liepos 12, 10, 23:38 2010-07-12 23:38

Aš atėjau į labai gerą ir paprastą sprendimą, kuris nekliudo vartotojui pasirinkti teksto ar kopijuoti įterpimo, kaip tai daro kiti sprendimai. JQuery stilius :)

 $("input.inputPhone").keyup(function() { var jThis=$(this); var notNumber=new RegExp("[^0-9]","g"); var val=jThis.val(); //Math before replacing to prevent losing keyboard selection if(val.match(notNumber)) { jThis.val(val.replace(notNumber,"")); } }).keyup(); //Trigger on page load to sanitize values set by server 
8
20 сент. Atsakymas suteiktas Vincentui, rugsėjo 20 d. 2013-09-20 00:07 '13, 0:07 2013-09-20 00:07

Galite naudoti šią „JavaScript“ funkciją:

 function maskInput(e) { //check if we have "e" or "window.event" and use them as "event" //Firefox doesn't have window.event var event = e || window.event var key_code = event.keyCode; var oElement = e ? e.target : window.event.srcElement; if (!event.shiftKey  !event.ctrlKey  !event.altKey) { if ((key_code > 47  key_code < 58) || (key_code > 95  key_code < 106)) { if (key_code > 95) key_code -= (95-47); oElement.value = oElement.value; } else if(key_code == 8) { oElement.value = oElement.value; } else if(key_code != 9) { event.returnValue = false; } } } 

Taip pat galite susieti jį su teksto lauku taip:

 $(document).ready(function() { $('#myTextbox').keydown(maskInput); }); 

Aš naudoju aukščiau minėtą gamybą ir ji veikia gerai, ir tai yra kryžminė naršyklė. Be to, jis nepriklauso nuo „jQuery“, todėl galite susieti jį su teksto lauku su įterptiniu „JavaScript“:

 <input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/> 
8
15 июня '09 в 12:27 2009-06-15 12:27 atsakymą pateikė karim79 birželio 15 d., 09:27, 2009-06-15 12:27

Manau, kad tai padės visiems.

  $('input.valid-number').bind('keypress', function(e) { return ( e.which!=8  e.which!=0  (e.which<48 || e.which>57)) ? false : true ; }) 
7
05 апр. Atsakymas pateikiamas Asif 05 balandžio. 2012-04-05 10:18 '12, 10:18, 2012-04-05 10:18

Tai atrodo nesugriaunama.

 // Prevent NULL input and replace text. $(document).on('change', 'input[type="number"]', function (event) { this.value = this.value.replace(/[^0-9\.]+/g, ''); if (this.value < 1) this.value = 0; }); // Block non-numeric chars. $(document).on('keypress', 'input[type="number"]', function (event) { return (((event.which > 47)  (event.which < 58)) || (event.which == 13)); }); 
6
26 июня '13 в 15:52 2013-06-26 15:52 Jonathanas atsakė birželio 26 d. 13 d. 15:52 2013-06-26 15:52

Čia yra greitas sprendimas, kurį sukūriau prieš kurį laiką. Daugiau apie tai galite sužinoti savo straipsnyje:

http://ajax911.com/numbers-numeric-field-jquery/

 $("#textfield").bind("keyup paste", function(){ setTimeout(jQuery.proxy(function() { this.val(this.val().replace(/[^0-9]/g, '')); }, $(this)), 0); }); 
6
24 мая '12 в 22:51 2012-05-24 22:51 Atsakymą duoda Dima gegužės 24 d., 12 val. 10:51 val. 2012-05-24 22:51

Čia yra atsakymas, kuriame naudojamas jQuery UI valdiklis. Galite konfigūruoti, kurie simboliai yra lengvai išspręsti.

 $('input').numberOnly({ valid: "0123456789+-.$," }); 

Tai leis jums nurodyti skaičius, skaitmenis ir dolerio sumas.

 $.widget('themex.numberOnly', { options: { valid : "0123456789", allow : [46,8,9,27,13,35,39], ctrl : [65], alt : [], extra : [] }, _create: function() { var self = this; self.element.keypress(function(event){ if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra)) { return; } if(event.ctrlKey  self._codeInArray(event,self.options.ctrl)) { return; } if(event.altKey  self._codeInArray(event,self.options.alt)) { return; } if(!event.shiftKey  !event.altKey  !event.ctrlKey) { if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1) { return; } } event.preventDefault(); }); }, _codeInArray : function(event,codes) { for(code in codes) { if(event.keyCode == codes[code]) { return true; } } return false; } }); 
6
25 марта '13 в 19:58 2013-03-25 19:58 atsakymas pateikiamas cgTag kovo 25 d. 13 val. 19:58 2013-03-25 19:58

Aš parašiau mano, remiantis pranešimu @ user261922 aukščiau, šiek tiek pakeista, kad galėtumėte pasirinkti visą skirtuką ir apdoroti kelis „tik skaičių“ laukus viename puslapyje.

 var prevKey = -1, prevControl = ''; $(document).ready(function () { $(".OnlyNumbers").keydown(function (event) { if (!(event.keyCode == 8 // backspace || event.keyCode == 9 // tab || event.keyCode == 17 // ctrl || event.keyCode == 46 // delete || (event.keyCode >= 35  event.keyCode <= 40) // arrow keys/home/end || (event.keyCode >= 48  event.keyCode <= 57) // numbers on keyboard || (event.keyCode >= 96  event.keyCode <= 105) // number on keypad || (event.keyCode == 65  prevKey == 17  prevControl == event.currentTarget.id)) // ctrl + a, on same control ) { event.preventDefault(); // Prevent character input } else { prevKey = event.keyCode; prevControl = event.currentTarget.id; } }); }); 
6
09 авг. irmesbar2 atsakymas 09 rug . 2011-08-09 23:35 '11, 11:35 PM 2011-08-09 23:35

Jums tereikia taikyti šį metodą „jQuery“ ir galite patikrinti teksto lauką, kad galėtumėte priimti tik numerį.

 function IsNumberKeyWithoutDecimal(element) { var value = $(element).val(); var regExp = "^\\d+$"; return value.match(regExp); } 

Išbandykite šį sprendimą čia.

5
29 янв. Atsakymą pateikė Jitender Kumar, sausio 29 d 2014-01-29 08:29 '14, 8:29 2014-01-29 08:29

Paprastas būdas patikrinti, ar įvesta vertė yra skaitinė:

 var checknumber = $('#textbox_id').val(); if(jQuery.isNumeric(checknumber) == false){ alert('Please enter numeric value'); $('#special_price').focus(); return; } 
5
22 окт. atsakymą pateikė Pragnesh Rupapara 2013-10-22 09:59 '13, 9:59, 2013-10-22 09:59

Norėjau šiek tiek padėti, ir aš padariau savo versiją, tik funkcijąNumerai ...

 function onlyNumbers(e){ var keynum; var keychar; if(window.event){ //IE keynum = e.keyCode; } if(e.which){ //Netscape/Firefox/Opera keynum = e.which; } if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35  keynum <= 40) || (event.keyCode >= 96  event.keyCode <= 105)))return true; if(keynum == 110 || keynum == 190){ var checkdot=document.getElementById('price').value; var i=0; for(i=0;i<checkdot.length;i++){ if(checkdot[i]=='.')return false; } if(checkdot.length==0)document.getElementById('price').value='0'; return true; } keychar = String.fromCharCode(keynum); return !isNaN(keychar); } 

Tiesiog pridėkite įvesties žymę "... input ... id =" kaina "onkeydown =" grąžinkite tik numerius (įvykis) "..." ir baigėte;)

5
07 дек. atsakymas pateikiamas 07 gruodį. 2010-12-07 08:05 '10, 08:05, 2010-12-07 08:05

Taip pat norėčiau atsakyti :)

  $('.justNum').keydown(function(event){ var kc, num, rt = false; kc = event.keyCode; if(kc == 8 || ((kc > 47  kc < 58) || (kc > 95  kc < 106))) rt = true; return rt; }) .bind('blur', function(){ num = parseInt($(this).val()); num = isNaN(num) ? '' : num; if(num  num < 0) num = num*-1; $(this).val(num); }); 

Kas tai yra ... tik skaičiai. :) Beveik jis gali dirbti tik su „neryškiu“, bet ...

5
19 янв. Atsakymą pateikė Pedro Soares 19 sausis 2012-01-19 03:17 '12 at 3:17 2012-01-19 03:17

Galite pabandyti įvesti HTML5 numerį:

 <input type="number" placeholder="enter the number" min="0" max="9"> 

Dabar šis įvesties žymens elementas bus vertinamas tik nuo 0 iki 9, nes min atributas yra 0, o maksimalus atributas yra 9.

Daugiau informacijos apie apsilankymą http://www.w3schools.com/html/html_form_input_types.asp

5
14 апр. atsakymas pateikiamas kkk 14 balandžio. 2015-04-14 20:05 '15 at 8:05 pm 2015-04-14 20:05

Norite įgalinti skirtuką:

 $("#txtboxToFilter").keydown(function(event) { // Allow only backspace and delete if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) { // let it happen, don't do anything } else { // Ensure that it is a number and stop the keypress if ((event.keyCode < 48 || event.keyCode > 57)  (event.keyCode < 96 || event.keyCode > 105 )) { event.preventDefault(); } } }); 
5
05 окт. atsakymas duotas ngwanevic 05 okt. 2011-10-05 11:04 '11, 11:04, 2011-10-05 11:04

Turite įsitikinti, kad turite skaitmeninę klaviatūrą, o skirtuko klavišas taip pat veikia.

  // Allow only backspace and delete if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) { // let it happen, don't do anything } else { // Ensure that it is a number and stop the keypress if ((event.keyCode >= 48  event.keyCode <= 57) || (event.keyCode >= 96  event.keyCode <= 105)) { } else { event.preventDefault(); } } 
4
16 окт. atsakymas, kurį pateikė Coppermill, spalio 16 d. 2009-10-16 10:13 '09, 10:13 2009-10-16 10:13
  • 1
  • 2
  • 3

Kiti klausimai apie „ žymes arba „ Klauskite“