Je crée une page Web où j'ai un champ de texte dans lequel je veux autoriser uniquement les caractères numériques comme (0,1,2,3,4,5 ... 9) 0-9.
Comment puis-je faire cela en utilisant jQuery?
Je crée une page Web où j'ai un champ de texte dans lequel je veux autoriser uniquement les caractères numériques comme (0,1,2,3,4,5 ... 9) 0-9.
Comment puis-je faire cela en utilisant jQuery?
Réponses:
Remarque: Ceci est une réponse mise à jour. Les commentaires ci-dessous se réfèrent à une ancienne version qui dérangeait les codes clés.
Essayez- le vous-même sur JSFiddle .
Il n'y a pas d'implémentation jQuery native pour cela, mais vous pouvez filtrer les valeurs d'entrée d'un texte <input>
avec le inputFilter
plugin suivant (prend en charge Copier + Coller, Glisser + Déposer, raccourcis clavier, opérations de menu contextuel, touches non typables, position du curseur, différent dispositions du clavier et tous les navigateurs depuis 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));
Vous pouvez maintenant utiliser le inputFilter
plugin pour installer un filtre d'entrée:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Voir la démo JSFiddle pour plus d'exemples de filtre d'entrée. Notez également que vous devez toujours effectuer la validation côté serveur!
jQuery n'est pas réellement nécessaire pour cela, vous pouvez également faire la même chose avec du JavaScript pur. Voir cette réponse .
HTML 5 a une solution native avec <input type="number">
(voir la spécification ), mais notez que la prise en charge du navigateur varie:
step
, min
et les max
attributs.e
et E
dans le champ. Voir aussi cette question .Essayez- le vous-même sur w3schools.com .
Voici la fonction que j'utilise:
// 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));
});
});
};
Vous pouvez ensuite l'attacher à votre contrôle en faisant:
$("#yourTextBoxName").ForceNumericOnly();
return this.each(function()
?
each
from return this.each(function()
permet d'autoriser plusieurs objets comme l'a dit HaggleLad, et la return
partie consiste à renvoyer l'objet jQuery à l'appelant, pour permettre le chaînage tel que$("input[type='text'").ForceNumericOnly().show()
En ligne:
<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
Style discret (avec 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
empêcher les premières séries de zéro.
Vous pouvez simplement utiliser une simple expression régulière JavaScript pour tester les caractères purement numériques:
/^[0-9]+$/.test(input);
Cela renvoie vrai si l'entrée est numérique ou faux sinon.
ou pour le keycode d'événement, utilisation simple ci-dessous:
// 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();
}
Vous pouvez utiliser sur l'événement d'entrée comme ceci:
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
Mais, quel est ce privilège de code?
decimal
entre 0.0
à 24.0
Je ne peux pas le laisser entrer dans le.
this.value = Number(this.value.replace(/\D/g, ''));
Court et doux - même si cela ne trouvera jamais beaucoup d'attention après plus de 30 réponses;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
Utilisez la fonction JavaScript isNaN ,
if (isNaN($('#inputid').val()))
if (isNaN (document.getElementById ('inputid'). val ()))
if (isNaN(document.getElementById('inputid').value))
Mise à jour: Et voici un bel article à ce sujet mais en utilisant jQuery: Restreindre l'entrée dans les zones de texte HTML aux valeurs numériques
document.getElementById('inputid').val()
mec .. c'est toujours jquery. .val()
est une chose jquery. utilisation.value
decimal
entre 0.0
à 24.0
je ne peux pas le laisser entrer dans le.
$(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();
}
}
});
});
Source: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
J'utilise ceci dans notre fichier js commun interne. J'ajoute simplement la classe à toute entrée qui a besoin de ce comportement.
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
Le plus simple pour moi est
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
this.value.replace(/[^0-9\.]/g,'');
pour inclure les exigences OP de 0-9
Pourquoi si compliqué? Vous n'avez même pas besoin de jQuery car il existe un attribut de modèle HTML5:
<input type="text" pattern="[0-9]*">
Ce qui est cool, c'est qu'il fait apparaître un clavier numérique sur les appareils mobiles, ce qui est bien mieux que d'utiliser jQuery.
Vous pouvez faire de même en utilisant cette solution très simple
$("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" />
J'ai fait référence à ce lien pour la solution. Cela fonctionne parfaitement !!!
decimal
entre 0.0
à 24.0
Je ne peux pas le laisser entrer dans le.
Vous pouvez essayer la saisie du nombre HTML5 :
<input type="number" value="0" min="0">
Pour les navigateurs non conformes, il existe des solutions de repli Modernizr et Webforms2 .
L'attribut pattern en HTML5 spécifie une expression régulière par rapport à laquelle la valeur de l'élément est vérifiée.
<input type="text" pattern="[0-9]{1,3}" value="" />
Remarque: l'attribut de modèle fonctionne avec les types d'entrée suivants: texte, recherche, URL, tél, e-mail et mot de passe.
[0-9] peut être remplacé par n'importe quelle condition d'expression régulière.
{1,3} il représente un minimum de 1 et un maximum de 3 chiffres peuvent être saisis.
decimal
entre 0.0
à 24.0
Je ne peux pas le laisser entrer dans le.
Quelque chose d'assez simple en utilisant 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)');
fonction suppressNonNumericInput (événement) {
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
entre 0.0
à 24.0
Je ne peux pas le laisser entrer dans le.
Je suis arrivé à une solution très bonne et simple qui n'empêche pas l'utilisateur de sélectionner du texte ou de copier-coller comme le font d'autres solutions. Style 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
Vous pouvez utiliser cette fonction 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;
}
}
}
Et vous pouvez le lier à votre zone de texte comme ceci:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
J'utilise ce qui précède dans la production, et cela fonctionne parfaitement, et c'est multi-navigateur. De plus, il ne dépend pas de jQuery, vous pouvez donc le lier à votre zone de texte avec JavaScript en ligne:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
Je pense que ça va aider tout le monde
$('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;
J'ai écrit le mien basé sur le post de @ user261922 ci-dessus, légèrement modifié pour que vous puissiez tout sélectionner, tabuler et gérer plusieurs champs "nombre uniquement" sur la même page.
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;
}
});
});
Voici une solution rapide que j'ai créée il y a quelque temps. vous pouvez en savoir plus à ce sujet dans mon article:
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);
});
Vous souhaitez autoriser l'onglet:
$("#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();
}
}
});
Voici une réponse qui utilise la fabrique de widgets jQuery UI. Vous pouvez facilement personnaliser les personnages autorisés.
$('input').numberOnly({
valid: "0123456789+-.$,"
});
Cela permettrait des chiffres, des signes numériques et des montants en dollars.
$.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;
}
});
Cela semble incassable.
// 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));
});
Vous devez vous assurer que le clavier numérique et la touche de tabulation fonctionnent également
// 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();
}
}
Je voulais aider un peu, et j'ai fait ma version, la onlyNumbers
fonction ...
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);
}
Ajoutez simplement la balise d'entrée "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." et vous avez terminé;)
Je voudrais également répondre :)
$('.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);
});
C'est ça ... juste des chiffres. :) Presque ça peut fonctionner juste avec le 'flou', mais ...
Un moyen simple de vérifier que la valeur entrée est numérique est:
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
Il suffit d'appliquer cette méthode dans Jquery et vous pouvez valider votre zone de texte pour accepter uniquement le numéro.
function IsNumberKeyWithoutDecimal(element) {
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp);
}
Essayez cette solution ici
Vous pouvez essayer la saisie du nombre HTML5:
<input type="number" placeholder="enter the number" min="0" max="9">
Cet élément de balise d'entrée prendrait désormais une valeur uniquement comprise entre 0 et 9, car l'attribut min est défini sur 0 et l'attribut max est défini sur 9.
pour plus d'informations, visitez http://www.w3schools.com/html/html_form_input_types.asp