Sto creando una pagina Web in cui ho un campo di testo di input in cui voglio consentire solo caratteri numerici come (0,1,2,3,4,5 ... 9) 0-9.
Come posso fare questo usando jQuery?
Sto creando una pagina Web in cui ho un campo di testo di input in cui voglio consentire solo caratteri numerici come (0,1,2,3,4,5 ... 9) 0-9.
Come posso fare questo usando jQuery?
Risposte:
Nota: questa è una risposta aggiornata. I commenti di seguito si riferiscono a una versione precedente che si è comportata in modo scorretto con i codici chiave.
Provalo tu stesso su JSFiddle .
Non esiste un'implementazione nativa di jQuery per questo, ma puoi filtrare i valori di input di un testo <input>
con il seguente inputFilter
plugin (supporta Copia + Incolla, Trascina + Rilascia, scorciatoie da tastiera, operazioni del menu contestuale, tasti non tipizzabili, posizione del cursore, diverse layout di tastiera e tutti i browser dall'IE 9 ):
// Restricts input for the set of matched elements to the given inputFilter function.
(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);
} else {
this.value = "";
}
});
};
}(jQuery));
Ora puoi usare il inputFilter
plugin per installare un filtro di input:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Vedi la demo di JSFiddle per altri esempi di filtri di input. Si noti inoltre che è ancora necessario eseguire la convalida lato server!
jQuery non è effettivamente necessario per questo, puoi fare la stessa cosa anche con JavaScript puro. Vedere questa risposta .
HTML 5 ha una soluzione nativa con <input type="number">
(vedi le specifiche ), ma nota che il supporto del browser varia:
step
, min
e max
attributi.e
e E
nel campo. Vedi anche questa domanda .Provalo tu stesso su w3schools.com .
Ecco la funzione che uso:
// 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));
});
});
};
Puoi quindi collegarlo al tuo controllo facendo:
$("#yourTextBoxName").ForceNumericOnly();
return this.each(function()
?
each
from return this.each(function()
è quello di consentire più oggetti come ha detto HaggleLad, e la return
parte è di restituire l'oggetto jQuery al chiamante, per consentire il concatenamento come$("input[type='text'").ForceNumericOnly().show()
In linea:
<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
Stile discreto (con jQuery):
$('input[name="number"]').keyup(function(e)
{
if (/\D/g.test(this.value))
{
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
.
/[^0-9]|^0+(?!$)/g
impedire serie iniziali di zero.
Puoi semplicemente usare una semplice espressione regolare JavaScript per testare caratteri puramente numerici:
/^[0-9]+$/.test(input);
Ciò restituisce true se l'input è numerico o false in caso contrario.
o per il codice chiave dell'evento, utilizzare semplicemente di seguito:
// 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();
}
È possibile utilizzare un evento di input come questo:
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
Ma cos'è questo privilegio di codice?
decimal
tra 0.0
di 24.0
non sono in grado di lasciar entrare nel.
this.value = Number(this.value.replace(/\D/g, ''));
Breve e dolce - anche se questo non troverà mai molta attenzione dopo oltre 30 risposte;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
Usa la funzione JavaScript isNaN ,
if (isNaN($('#inputid').val()))
if (isNaN (document.getElementById ('inputid'). val ()))
if (isNaN(document.getElementById('inputid').value))
Aggiornamento: E qui un bell'articolo che ne parla ma usando jQuery: Limitare l'input nelle caselle di testo HTML a valori numerici
document.getElementById('inputid').val()
amico .. è ancora jquery. .val()
è una cosa jquery. utilizzare.value
decimal
tra 0.0
di 24.0
non sono in grado di lasciar entrare nel.
$(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();
}
}
});
});
Fonte: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
Lo uso nel nostro file js comune interno. Aggiungo solo la classe a qualsiasi input che abbia bisogno di questo comportamento.
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
Uno più semplice per me è
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
this.value.replace(/[^0-9\.]/g,'');
di includere i requisiti di OP di 0-9
Perché così complicato? Non hai nemmeno bisogno di jQuery perché c'è un attributo pattern HTML5:
<input type="text" pattern="[0-9]*">
La cosa interessante è che visualizza una tastiera numerica sui dispositivi mobili, il che è molto meglio dell'uso di jQuery.
Puoi fare lo stesso usando questa soluzione molto semplice
$("input.numbers").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />
Ho fatto riferimento a questo link per la soluzione. Funziona perfettamente !!!
decimal
tra 0.0
di 24.0
non sono in grado di lasciar entrare nel.
L'attributo pattern in HTML5 specifica un'espressione regolare con cui viene verificato il valore dell'elemento.
<input type="text" pattern="[0-9]{1,3}" value="" />
Nota: l'attributo modello funziona con i seguenti tipi di input: testo, ricerca, url, tel, e-mail e password.
[0-9] può essere sostituito con qualsiasi condizione di espressione regolare.
{1,3} rappresenta un minimo di 1 e un massimo di 3 cifre può essere inserito.
decimal
tra 0.0
di 24.0
non sono in grado di lasciar entrare nel.
Qualcosa di abbastanza semplice usando 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)');
function suppressNonNumericInput (event) {
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
}
}
decimal
tra 0.0
di 24.0
non sono in grado di lasciar entrare nel.
Sono arrivato a una soluzione molto buona e semplice che non impedisce all'utente di selezionare testo o copia e incolla come fanno altre soluzioni. stile jQuery :)
$("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
È possibile utilizzare questa funzione JavaScript:
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;
}
}
}
E puoi associarlo alla tua casella di testo in questo modo:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Uso quanto sopra in produzione e funziona perfettamente ed è cross-browser. Inoltre, non dipende da jQuery, quindi puoi collegarlo alla tua casella di testo con JavaScript incorporato:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
Penso che aiuterà tutti
$('input.valid-number').bind('keypress', function(e) {
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
})
if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
Ho scritto il mio sulla base del post di @ user261922 sopra, leggermente modificato in modo da poter selezionare tutto, scheda e gestire più campi "solo numero" sulla stessa pagina.
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;
}
});
});
Ecco una rapida soluzione che ho creato qualche tempo fa. puoi leggere di più a riguardo nel mio articolo:
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);
});
Si desidera consentire la scheda:
$("#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();
}
}
});
Ecco una risposta che utilizza jQuery UI Widget factory. Puoi personalizzare facilmente quali personaggi sono ammessi.
$('input').numberOnly({
valid: "0123456789+-.$,"
});
Ciò consentirebbe numeri, segni numerici e importi in dollari.
$.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;
}
});
Questo sembra infrangibile.
// 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));
});
È necessario assicurarsi di disporre anche del tastierino numerico e del tasto Tab
// 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();
}
}
Volevo aiutare un po 'e ho realizzato la mia versione, la onlyNumbers
funzione ...
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);
}
Aggiungi semplicemente il tag di input "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." e hai finito;)
Vorrei anche rispondere :)
$('.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);
});
Questo è tutto ... solo numeri. :) Quasi può funzionare solo con la 'sfocatura', ma ...
Il modo semplice per verificare che il valore di immissione sia numerico è:
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
Ho solo bisogno di applicare questo metodo in Jquery e puoi validare la tua casella di testo per accettare solo il numero.
function IsNumberKeyWithoutDecimal(element) {
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp);
}
Prova questa soluzione qui
Puoi provare a inserire il numero HTML5:
<input type="number" placeholder="enter the number" min="0" max="9">
Questo elemento tag di input ora avrebbe valore solo tra 0 e 9 poiché l'attributo min è impostato su 0 e l'attributo max è impostato su 9.
per ulteriori informazioni, visitare http://www.w3schools.com/html/html_form_input_types.asp