Am creat o pagină web în cazul în care am avea un text de intrare domeniul în care vreau să-permite doar caractere numerice, cum ar fi (0,1,2,3,4,5...9) 0-9.
Cum pot face acest lucru folosind jQuery?
Notă: Aceasta este o versiune actualizată a răspuns. Comentarii de mai jos se referă la o versiune veche care s-a încurcat cu simboluri.
Încercați să-l singur [pe JSFiddle][1].
Nu există nici un nativ jQuery aplicare pentru acest lucru, dar puteți filtra valorile de intrare ale unui text <input> cu următoarele
inputFilter` plugin (acceptă Copy+Paste, Drag+Drop, comenzi rapide de la tastatură, meniul contextual operațiuni, non-typeable cheile, caret poziție, diferite aranjamente de tastatură, și toate browserele de 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);
}
});
};
}(jQuery));
Acum puteți utiliza inputFilter
plugin-ul pentru a instala un filtru de intrare:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Aici sunt unele mai multe exemple de astfel de filtre care ar putea fi de ajutor:
return /^-?\d*$/.test(value); // Integer
return /^\d*$/.test(value); // Integer >= 0
return /^\d*$/.test(value) && // Integer >= 0 and <= 500
(value === "" || parseInt(value) <= 500);
return /^-?\d*[.,]?\d*$/.test(value); // Float (accept both '.' and ',' as decimal separator)
return /^-?\d*[.,]?\d{0,2}$/.test(value); // Currency (i.e. at most two decimal places)
return /^[a-z]*$/i.test(value); // A-Z only
return /^[0-9a-f]*$/i.test(value); // Hexadecimal
Rețineți că, încă trebuie fac validare partea de server!
jQuery este't de fapt necesare pentru acest lucru, puteți face același lucru cu pură JavaScript, precum și. A se vedea acest răspuns sau încercați să-l singur [pe JSFiddle][4].
HTML 5 are o soluție nativ cu <input type="număr">
(vezi caietul de sarcini), dar rețineți că browser-ul de sprijin variază:
Încercați să-l singur pe w3schools.com.
Aici este funcția folosesc:
// 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));
});
});
};
Puteți apoi atașați-l la un control de a face:
$("#yourTextBoxName").ForceNumericOnly();
Inline:
<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
Stil discret (cu 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">
Ai putea folosi doar un simplu JavaScript expresie regulată pentru a testa pur caractere numerice:
/^[0-9]+$/.test(input);
Aceasta returnează true dacă intrarea este numeric sau false dacă nu.
sau pentru evenimentul dorit, simplu de utilizare de mai jos :
// 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();
}
Le puteți folosi pe intrare astfel de eveniment:
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
Dar, ceea ce's acest cod privilegiu?
Scurt și dulce - chiar dacă acest lucru nu va găsi multă atenție după 30+ răspunsuri ;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
Utilizarea JavaScript function isNaN,
if (isNaN($('#inputid').val()))
<grevă> if (isNaN(document.getElementById('inputid').val()))
if (isNaN(document.getElementById('inputid').value))
Actualizare: Și aici un frumos articol vorbesc despre asta, dar folosind jQuery: Restricționarea Introducere în HTML Casete pentru Valori Numerice
Eu folosesc acest lucru în noastre interne comune js fișiere. Eu trebuie doar să adăugați clasa la orice intrare care are nevoie de acest comportament.
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
$(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();
}
}
});
});
Sursa: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
De ce atât de complicat? Nu't chiar nevoie de jQuery pentru că acolo este un HTML5 model de atribut:
<input type="text" pattern="[0-9]*">
Cool thing este că aduce o tastatură numerică de pe dispozitive mobile, care este mult mai bună decât folosind jQuery.
Puteți face același lucru prin utilizarea această soluție foarte simplă
$("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" />
M-am referit la acest link pentru soluție. Acesta funcționează perfect!!!
Modelul atribut în HTML5 specifică o expresie regulată care <input> element's valoare este verificat.
<input type="text" pattern="[0-9]{1,3}" value="" />
Notă: modelul atribut funcționează cu următoarele tipuri de intrare: text, de căutare, url-ul, tel, e-mail și parola.
[0-9] poate fi înlocuit cu orice expresie regulată condiție.
{1,3} reprezintă minim 1 și maxim 3 cifre pot fi introduse.
Ceva destul de simplu, folosind jQuery.valida
$(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)');
Puteți utiliza această funcție 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;
}
}
}
Și puteți lega-l la caseta de text astfel:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Eu folosesc de mai sus în producție, și funcționează perfect, și este cross-browser. În plus, aceasta nu depinde de jQuery, astfel încât să puteți lega-l la casuta cu inline JavaScript:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
Am ajuns la un foarte bun și soluție simplă, care nu't preveni utilizatorul de selectarea textului sau copie lipire și alte soluții. jQuery stil :)
$("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
funcția suppressNonNumericInput(eveniment){
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
}
}
Aici este o soluție rapidă-am creat cu ceva timp în urmă. puteți citi mai multe despre asta în articolul meu:
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);
});