Comment autoriser uniquement la saisie numérique (0-9) dans HTML inputbox avec jQuery
Je crée une page Web contenant un champ de saisie dans lequel je souhaite autoriser uniquement les caractères numériques tels que (0,1,2,3,4,5 ... 9) 0-9.
Comment puis-je faire cela en utilisant jQuery?
Remarque: Ceci est une réponse mise à jour. Les commentaires ci-dessous font référence à une ancienne version qui dérangeait les codes de clé.
jQuery
Le plugin inputFilter ci-dessous vous permet d’utiliser n’importe quel type de filtre d’entrée sur un texte <input>, y compris divers filtres numériques (voir ci-dessous). au dessous de).
Contrairement à la plupart des autres solutions, ceci supporte correctement Copier + Coller, Glisser + Lâcher, tous les raccourcis clavier, toutes les opérations du menu contextuel, toutes les touches non typables (par exemple touches de curseur et de navigation), la position du curseur, toutes les dispositions de clavier de toutes les langues et de toutes les plateformes, et tous les navigateurs depuis IE 9 .
Essayez vous-même sur 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));
$(document).ready(function() {
// Restrict input to digits by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value);
});
});
Certains filtres d’entrée que vous voudrez peut-être utiliser:
- Entier valeurs (positives uniquement):
/^\d*$/.test(value) - Entier valeurs (positives et allant jusqu'à une limite particulière):
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500) - Nombre entier (à la fois positif et négatif):
/^-?\d*$/.test(value) - Virgule flottante valeurs (autorisant à la fois
.et,comme séparateur décimal):/^-?\d*[.,]?\d*$/.test(value) - Valeurs monétaires (c'est-à-dire au plus deux décimales):
/^-?\d*[.,]?\d{0,2}$/.test(value) - A-Z uniquement (c'est-à-dire lettres latines de base):
/^[a-z]*$/i.test(value) - Lettres latines uniquement (c'est-à-dire l'anglais et la plupart des langues européennes, voir https://unicode-table.com pour plus d'informations sur Unicode. plages de caractères):
/^[a-z\u00c0-\u024f]*$/i.test(value) - Valeurs hexadécimales :
/^[0-9a-f]*$/i.test(value)
Notez que vous devez toujours faire la validation côté serveur!
JavaScript pur (sans jQuery)
jQuery n'est pas vraiment nécessaire pour cela, vous pouvez faire la même chose avec du JavaScript pur. Voir cette réponse ou essayez vous-même sur JSFiddle .
HTML 5
HTML 5 a une solution native avec <input type="number"> (voir spécification ), mais notez que la prise en charge du navigateur varie:
- La plupart des navigateurs ne valideront la saisie que lors de la soumission du formulaire, et non lors de la saisie.
- La plupart des navigateurs mobiles ne supporte pas les attributs
step,minetmax. - Chrome (version 71.0.3578.98) permet toujours à l'utilisateur de saisir les caractères
eetEdans le champ. Voir aussi cette question . - Firefox (version 64.0) et Edge (EdgeHTML version 17.17134) permettent toujours à l'utilisateur de saisir du texte dans le champ.
Essayez 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();
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">Vous pouvez simplement utiliser une simple expression régulière JavaScript pour tester des caractères purement numériques:
/^[0-9]+$/.test(input);
Ceci retourne true si l'entrée est numérique ou false sinon.
ou pour le code de l'événement, simple d'utilisation 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 un é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?
- Cela fonctionne sur les navigateurs mobiles (keydown et keyCode ont un problème).
- Cela fonctionne également sur le contenu généré par AJAX, car nous utilisons "on".
- Meilleure performance que keydown, par exemple sur un événement coller.
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, '');
});
Utiliser la fonction JavaScript isNaN ,
if (isNaN($('#inputid').val()))
if (isNaN (document.getElementById ('inputid'). val ()))
if (isNaN(document.getElementById('inputid').value))
Update: Et voici un bel article qui en parle mais utilise jQuery: Restreindre les entrées dans les zones de texte HTML aux valeurs numériques
$(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 ayant besoin de ce comportement.
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
Un plus simple pour moi est
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
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]*">
La chose intéressante est qu'il fait apparaître un clavier numérique sur les appareils mobiles, ce qui est bien meilleur que d'utiliser jQuery.
Vous pouvez faire la même chose 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. Ça marche parfaitement !!!
L'attribut pattern de HTML5 spécifie une expression régulière sur laquelle la valeur de l'élément est vérifiée.
<input type="text" pattern="[0-9]{1,3}" value="" />
Remarque: L'attribut pattern fonctionne avec les types de saisie suivants: texte, recherche, URL, tel, email 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 entrés.
Quelque chose d'assez simple avec 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
}
}
Je suis arrivé à une solution simple et efficace qui n'empêche pas l'utilisateur de sélectionner du texte ou du copier-coller comme le font les 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 en production, et cela fonctionne parfaitement, et c'est multi-navigateur. De plus, cela ne dépend pas de jQuery, vous pouvez donc le lier à votre textbox avec du JavaScript intégré:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
Je pense que cela aidera 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 ;
})
Voici une solution rapide que j'ai créée il y a quelque temps. vous pouvez en lire plus 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);
});
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));
});
Voici une réponse qui utilise l’usine de jQuery UI Widget. Vous pouvez personnaliser quels personnages sont autorisés facilement.
$('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;
}
});
J'ai écrit le mien sur la base du message de @ user261922 ci-dessus, légèrement modifié pour vous permettre de tout sélectionner, de tabuler et de gérer plusieurs champs "uniquement des chiffres" 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;
}
});
});
Vous pouvez essayer la saisie du numéro HTML5:
<input type="number" placeholder="enter the number" min="0" max="9">
Cet élément de balise d'entrée prend désormais uniquement une valeur comprise entre 0 et 9as l'attribut min est défini sur 0 et l'attribut max sur 9
pour plus d'informations sur la visite http://www.w3schools.com/html/html_form_input_types.asp
Je voulais aider un peu et j'ai créé ma version, la fonction onlyNumbers ...
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 dans la balise d'entrée "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." et vous avez terminé;)
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;
}
Vous voudriez 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();
}
}
});
Je voudrais aussi 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 cela peut fonctionner uniquement avec le "flou", mais ...
Il suffit d’appliquer cette méthode dans Jquery et vous pouvez valider votre zone de texte pour n’accepter que le nombre.
function IsNumberKeyWithoutDecimal(element) {
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp);
}
Essayez cette solution ici
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();
}
}
Il existe un problème de compatibilité incroyable avec l’utilisation des touches du clavier pour détecter le caractère pressé ... voir quirksmode pour en savoir plus à ce sujet.
Je suggérerais d'utiliser keyup pour créer votre filtre, car vous disposez de la méthode $ (element) .val () que vous pouvez utiliser pour évaluer les caractères universels réels.
Ensuite, vous pouvez filtrer tous les chiffres NON NON en utilisant une expression rationnelle comme:
remplacer (/ [^ 0-9]/g, '');
Cela prend en charge tous les problèmes tels que les problèmes de décalage et de collage car il y a toujours un raccourci clavier et donc la valeur sera toujours évaluée (à moins que javascript soit désactivé).
Donc ... pour transformer cela en JQuery ... Voici un petit plugin inachevé que j'écris, il s'appelle inputmask et supportera plus de masques lorsque vous aurez terminé. Pour l'instant, le masque de chiffres fonctionne.
Ici ça va ...
/**
* @author Tom Van Schoor
* @company Tutuka Software
*/
(function($) {
/**
* @param {Object}
* $$options options to override settings
*/
jQuery.fn.inputmask = function($$options) {
var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);
return this.each(function() {
// $this is an instance of the element you call the plug-in on
var $this = $(this);
/*
* This plug-in does not depend on the metadata plug-in, but if this
* plug-in detects the existence of the metadata plug-in it will
* override options with the metadata provided by that plug-in. Look at
* the metadata plug-in for more information.
*/
// o will contain your defaults, overruled by $$options,
// overruled by the meta-data
var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;
/*
* if digits is in the array 'validators' provided by the options,
* stack this event handler
*/
if($.inArray('digits', o.validators) != -1) {
$this.keyup(function(e) {
$this.val(stripAlphaChars($this.val()));
});
}
/*
* There is no such things as public methods in jQuery plug-ins since
* there is no console to perform commands from a client side point of
* view. Typically only private methods will be fired by registered
* events as on-click, on-drag, etc... Those registered events could be
* seen as public methods.
*/
// private method
var stripAlphaChars = function(string) {
var str = new String(string);
str = str.replace(/[^0-9]/g, '');
return str;
}
});
};
// static public functions
//jQuery.fn.inputmask.doSomething = function(attr) {
//};
// static public members
//jQuery.fn.inputmask.someStaticPublicMember;
// some default settings that can be overridden by either $$options or
// metadata
// If you need callback functions for the plug-in, this is where they get
// set
jQuery.fn.inputmask.defaults = {
validators : []
};
})(jQuery);
Pour l'utiliser, il suffit de:
$('#someElementId').inputmask({
validators: ['digits','someOtherNotYetImplementedValidator']
});
Le 'someOtherNotYetImplementedValidator' est juste là pour montrer comment cela peut être étendu pour de futurs masques/validateurs. Vous pouvez l'ajouter ou le laisser, cela ne casse rien ;-)
Appologies pour le fouillis de commentaires supplémentaire, j'utilise un modèle que j'ai créé pour les gars ici au travail.
J'espère que cela vous aide.
Voici le chemin avec l'expression régulière:
$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
https://jsfiddle.net/astrapi69/qbk2vjty/1/
Et vous pouvez modifier l'expression régulière en toute autre chose si vous souhaitez limiter les autres caractères, puis les nombres.
Solution mise à jour pour une meilleure expérience utilisateur, qui résout le problème du copier-coller et remplace l'attribut obsolète keyCode:
HTML
<input type="tel">
jQuery
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^\d]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
keys = ['0','1','2','3','4','5','6','7','8','9']
return keys.indexOf(event.key) > -1
})
Détails:
Tout d’abord, types d’entrée:
number montre les flèches haut/bas qui rétrécissent l'espace d'entrée réel, je les trouve laides et ne sont utiles que si le nombre représente une quantité (des éléments tels que des téléphones, des indicatifs régionaux, des identifiants, etc.) .tel fournit des validations similaires du navigateur sans nombre de flèches
L'utilisation de [numéro/tél] permet également d'afficher le clavier numérique sur les appareils mobiles.
Pour la validation JS, j'ai finalement eu besoin de 2 fonctions, une pour l'entrée utilisateur normale (pression au clavier) et l'autre pour un correctif copier-coller (modifier). D'autres combinaisons me procureraient une expérience utilisateur épouvantable.
J'utilise le plus fiableKeyboardEvent.key au lieu du maintenant obsolèteKeyboardEvent.charCode
Et en fonction de la prise en charge de votre navigateur, vous pouvez envisager d’utiliser Array.prototype.includes () au lieu du mal nommé Array.prototype.indexOf () (pour des résultats vrais/faux)
J'ai eu un problème avec la meilleure réponse. Il n'inclut pas le clavier numérique et si vous appuyez sur Maj + numéro, les signes spéciaux ne doivent pas s'afficher non plus .. mais cette solution ne s'en occupe pas.
Le meilleur lien que j'ai trouvé dans ce fil était le suivant: http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-In-HTML-Textboxes- to-numeric-values
Je suis nouveau sur stackoverflow donc je ne sais pas si je peux simplement éditer la meilleure solution dans le top-post.
Pour élaborer un peu plus sur la réponse n ° 3, je ferais ce qui suit (REMARQUE: ne supporte toujours pas les opérations de collage via le clavier ou la souris):
$('#txtNumeric').keypress(
function(event) {
//Allow only backspace and delete
if (event.keyCode != 46 && event.keyCode != 8) {
if (!parseInt(String.fromCharCode(event.which))) {
event.preventDefault();
}
}
}
);
Si vous devez résoudre des signes diacritiques et des caractères spéciaux, essayez ceci:
$(this).on( 'keypress', function( e )
{
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
e.preventDefault();
}
});
Beaucoup de gens ici utilisent keycode property , ce qui n'est pas facile à retenir. Si vous ne rencontrez pas de problèmes de paramètres régionaux, vous pouvez simplement utiliser key, qui est en réalité, l'entrée saisie par l'utilisateur.
Voir ceci Fiddle
$("#txt").on("keypress",function(e){
console.log("Entered Key is " + e.key);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
return true;
break;
case ".":
if ($(this).val().indexOf(".") == -1) //Checking if it already contains decimal. You can Remove this condition if you do not want to include decimals in your input box.
{
return true;
}
else
{
return false;
}
break;
default:
return false;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Enter Value
<input id="txt" type="text" />problème puis voir le code simple suivant.
Veuillez noter que cet exemple contient également une validation pour l'entrée décimale.
Selon cette question, il n'est pas nécessaire, vous pouvez donc simplement supprimer le cas "." supprimer l’entrée de la décimale.
Ce code jQuery filtre les caractères saisis pendant la Shift, Ctrl ou Alt est maintenu.
$('#AmountText').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
e.preventDefault(); // Prevent character input
} else {
var n = e.keyCode;
if (!((n == 8) // backspace
|| (n == 46) // delete
|| (n >= 35 && n <= 40) // arrow keys/home/end
|| (n >= 48 && n <= 57) // numbers on keyboard
|| (n >= 96 && n <= 105)) // number on keypad
) {
e.preventDefault(); // Prevent character input
}
}
});
essayez-le dans le code html comme onkeypress et onpast
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpast="return false">
Vous pouvez utiliser numéro de type d’entrée HTML5 pour restreindre uniquement les entrées de numéro:
<input type="number" name="someid" />
Cela fonctionnera uniquement dans le navigateur de réclamations HTML5. Assurez-vous que le doctype de votre document html est:
<!DOCTYPE html>
À des fins générales, vous pouvez avoir la validation JS comme ci-dessous:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>
Si vous souhaitez autoriser les décimales, remplacez la "condition if" par ceci:
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
Source:La saisie de texte HTML n'autorise que la saisie numérique
Démo de JSFiddle:http://jsfiddle.net/Gagan_Gami/nSjy7/333/
C'est peut-être exagéré pour ce que vous cherchez, mais je suggère un plugin jQuery appelé autoNumeric () - c'est génial!
Vous pouvez limiter uniquement les nombres, la précision décimale, les valeurs max/min, etc.
C'est pourquoi j'ai récemment écrit pour accomplir cela. Je sais que cela a déjà été répondu, mais je laisse cela pour des utilisations ultérieures.
Cette méthode autorise uniquement les touches 0 à 9, clavier, pavé numérique, backspaces, tabulation, flèches gauche et droite (opérations sur formulaire normal)
$(".numbersonly-format").keydown(function (event) {
// Prevent shift key since its not needed
if (event.shiftKey == true) {
event.preventDefault();
}
// Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
// Allow normal operation
} else {
// Prevent the rest
event.preventDefault();
}
});
Vous pouvez utiliser la validation HTML5 sur vos entrées de texte en ajoutant un motif. Pas besoin de valider manuellement avec regex ou keyCodes.
<input type="text" pattern="[0-9.]+" />
$("input[type=text][pattern]").on("input", function () {
if (!this.checkValidity())
this.value = this.value.slice(0, -1);
});
Possible, mais pas aussi simple pour les entrées [type = nombre] ...
Le problème avec [type = "numéro"] est que nous ne pouvons pas uniquement supprimer le caractère non valide à la fin. Les agents d'utilisateur retournent une chaîne vide chaque fois que l'entrée est invalide.
A partir des spécifications HTML5 du W3C:
Si la valeur de l'élément n'est pas un nombre à virgule flottante valide, alors définissez-le sur la chaîne vide à la place.
https://dev.w3.org/html5/spec-LC/number-state.html#number-state
Cela signifie que nous avons besoin d'un moyen de stocker manuellement la valeur d'entrée précédente.
Donc, pour les entrées numériques, la solution ressemblerait à ceci:
$("input[type=number], input[type=text][pattern]").on("input", function () {
if (!this.checkValidity())
this.value = $(this).data("current-valid") || "";
else
$(this).data("current-valid", this.value);
});
Malheureusement, cela ne fonctionnera pas sur IE et Edge. Nous devons recourir à la solution de modèle ci-dessus pour ces navigateurs. Cependant, vous pouvez toujours utiliser des entrées numériques avec ce polyfill simple.
$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");
/**
Makes the textbox to accept only numeric input
*/
(function($) {
$.fn.allowOnlyNumeric = function() {
/**
The interval code is commented as every 250 ms onchange of the textbox gets fired.
*/
// var createDelegate = function(context, method) {
// return function() { method.apply(context, arguments); };
// };
/**
Checks whether the key is only numeric.
*/
var isValid = function(key) {
var validChars = "0123456789";
var validChar = validChars.indexOf(key) != -1;
return validChar;
};
/**
Fires the key down event to prevent the control and alt keys
*/
var keydown = function(evt) {
if (evt.ctrlKey || evt.altKey) {
evt.preventDefault();
}
};
/**
Fires the key press of the text box
*/
var keypress = function(evt) {
var scanCode;
//scanCode = evt.which;
if (evt.charCode) { //For ff
scanCode = evt.charCode;
}
else { //For ie
scanCode = evt.keyCode;
}
if (scanCode && scanCode >= 0x20 /* space */) {
var c = String.fromCharCode(scanCode);
if (!isValid(c)) {
evt.preventDefault();
}
}
};
/**
Fires the lost focus event of the textbox
*/
var onchange = function() {
var result = [];
var enteredText = $(this).val();
for (var i = 0; i < enteredText.length; i++) {
var ch = enteredText.substring(i, i + 1);
if (isValid(ch)) {
result.Push(ch);
}
}
var resultString = result.join('');
if (enteredText != resultString) {
$(this).val(resultString);
}
};
//var _filterInterval = 250;
//var _intervalID = null;
//var _intervalHandler = null;
/**
Dispose of the textbox to unbind the events.
*/
this.dispose = function() {
$(this).die('change', onchange);
$(this).die('keypress', keypress);
$(this).die('keydown', keydown);
//window.clearInterval(_intervalHandler);
};
$(this).live('change', onchange);
$(this).live('keypress', keypress);
$(this).live('keydown', keydown);
//_intervalHandler = createDelegate(this, onchange);
//_intervalID = window.setInterval(_intervalHandler, _filterInterval);
}
})(jQuery);
Le plugin $ ci-dessus est écrit à partir de la boîte de texte du filtre AjaxControlToolkit extender.js.
Cependant, AjaxControlToolkit n'a pas emprunté le comportement suivant: lorsque l'utilisateur copie et colle toute valeur non numérique, l'événement onchange se déclenche et la zone de texte absorbe les valeurs. J'ai parcouru le code et découvert que cet échange a été appelé toutes les 250 ms, ce qui est un succès, a donc commenté cette partie.
ajouter le code ci-dessous dans document.ready
$('.class of text box').keyup(function ()
{
this.value = this.value.replace(/[^0-9]/g, '');
});
Aucune des réponses n’ayant fonctionné dans mon cas, j’ai donc modifié légèrement la réponse acceptée pour la faire fonctionner pour dynamiquement éléments ajoutés.
Prendre plaisir :
var inputFilter = function (elem, cb) {
/*
* /^-?\d*$/ restricts input to integer numbers
* /^\d*$/ restricts input to unsigned integer numbers
* /^[0-9a-f]*$/i restricts input to hexadecimal numbers
* /^-?\d*[.,]?\d*$/ restricts input to floating point numbers (allowing both . and , as decimal separator)
* /^-?\d*[.,]?\d{0,2}$/ restricts input to currency values (i.e. at most two decimal places)
*/
bdy.on('input keydown keyup mousedown mouseup select contextmenu drop', elem, function () {
if (cb(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);
}
});
};
Utilisation:
inputFilter('#onlyDigitsInput', function (val) {
return /^\d*$/.test(val);
});
Je recommande de vérifier également event.metaKey. Si ce paramètre est défini sur true, il est possible que l'utilisateur fasse quelque chose comme cmd-A pour sélectionner tout le texte du champ. Vous devriez permettre cela aussi.
$(document).on("keypress", ".classname", function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
});
Refactored la réponse acceptée afin que les commentaires ne doivent plus être utilisés car je déteste les commentaires. C'est aussi plus facile à tester avec du jasmin.
allowBackspaceDeleteTabEscapeEnterPress: function(event){
return ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 190]) >= 0);
},
allowContorlAPress: function(event){
return (event.keyCode == 65 && event.ctrlKey === true)
},
allowHomeEndLeftRightPress: function(event){
return (event.keyCode >= 35 && event.keyCode <= 39)
},
theKeyPressedIsEditRelated: function (event) {
return (this.allowBackspaceDeleteTabEscapeEnterPress(event)
|| this.allowContorlAPress(event)
|| this.allowHomeEndLeftRightPress(event));
},
isNotFromTheNumKeyPad: function (event) {
return (event.keyCode < 96 || event.keyCode > 105);
},
isNotFromTopRowNumberKeys: function (event) {
return (event.keyCode < 48 || event.keyCode > 57);
},
theKeyIsNonNumeric: function (event) {
return (event.shiftKey
|| (this.isNotFromTopRowNumberKeys(event)
&& this.isNotFromTheNumKeyPad(event)));
},
bindInputValidator: function(){
$('.myinputclassselector').keydown(function (event) {
if(this.validateKeyPressEvent(event)) return false;
});
},
validateKeyPressEvent: function(event){
if(this.theKeyPressedIsEditRelated(event)){
return;
} else {
if (this.theKeyIsNonNumeric(event)) {
event.preventDefault();
}
}
}
C’est ce que j’utilise pour valider des entrées numériques pour des valeurs entières ou flottantes (style discret avec jQuery):
$('input[name="number"]').keyup(function(e) {
var float = parseFloat($(this).attr('data-float'));
/* 2 regexp for validating integer and float inputs *****
> integer_regexp : allow numbers, but do not allow leading zeros
> float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part
*************************************************************************/
var integer_regexp = (/[^0-9]|^0+(?!$)/g);
var float_regexp = (/[^0-9\.]|^\.+(?!$)|^0+(?=[0-9]+)|\.(?=\.|.+\.)/g);
var regexp = (float % 1 === 0) ? integer_regexp : float_regexp;
if (regexp.test(this.value)) {
this.value = this.value.replace(regexp, '');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-float="1" id="number" name="number" placeholder="integer">
<input type="text" data-float="0.1" id="number" name="number" placeholder="float">Une autre approche est ci-dessous. Cela prendra soin de coller aussi. [c'est pour la validation alphanumérique]
//Input Validation
var existingLogDescription = "";
$('.logDescription').keydown(function (event) {
existingLogDescription = this.value;
});
$('.logDescription').keyup(function () {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
alert("Log Description should contain alpha-numeric values only");
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
this.value = existingLogDescription;
}
});
mettre une classe dans le texte d'entrée et nommez-la only_numbers
mettre le code jQuery dans la page
$(document).ready(function() {
$('.only_numbers').keyup(function() {
var numbers = $(this).val();
$(this).val(numbers.replace(/\D/, ''));
});
});
s'amuser :-)
Cette réponse était parfaite, mais nous pouvons même la rendre meilleure et plus puissante en la combinant avec le plugin jQuery.Validation .
En utilisant la méthode number () , nous pouvons développer quelque chose comme ceci:
$('.numberOnly').keydown(function (event) {
if ((!event.shiftKey && !event.ctrlKey && !event.altKey) &&
((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)))
// 0-9 or numpad 0-9, disallow shift, ctrl, and alt
{
// check textbox value now and tab over if necessary
}
else if (event.keyCode != 8 && event.keyCode != 13 && event.keyCode != 46 && event.keyCode != 37
&& event.keyCode != 39 && event.keyCode != 9 && event.keyCode != 109
&& event.keyCode != 189 && event.keyCode != 110 && event.keyCode != 190)
// not backsapce (8), enter (13), del (46), left arrow (37), right arrow (39), tab (9), negetive sign (- : 109, 189), or point (. : 110, 190)
{
event.preventDefault();
}
// else the key should be handled normally
});
// _____________________________________________
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
// _____________________________________________
$(document).ready(function(){
$('#myFormId').validate({
rules: {
field: {
required: true,
number: true
}
}
});
});
Ainsi, toute zone de texte sous la forme "#myFormId", avec la classe "numberOnly", accepte uniquement les nombres incluant les nombres décimaux, flottants et même négatifs. Voila :)
PS: Dans mon cas, j’ai utilisé jQuery.validator.addMethod () au lieu de .validate () pour une raison quelconque:
jQuery.validator.addMethod("numberOnly", function (value, element) {
var result = !isNaN(value);
return this.optional(element) || result;
}, jQuery.format("Please enter a valid number."));
(cela fonctionne bien dans mon projet ASP.NET MVC 3 + validation JavaScript discrète, hooooooooray!)
J'ai combiné toutes les réponses en une et je viens avec le code suivant:
jQuery('#input_id', function(e){
// Allow: backspace, delete, tab, escape, enter
if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// Disallow several dots (allow 190 only if no dots found)
(e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
// Bug in some Android devices where it is always 229
(e.keyCode === 229) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
De plus, le formulaire devrait avoir autocomplete="off". Sans cette option, des algorithmes de saisie semi-automatique sur des appareils mobiles pourraient poser problème.
Vérifiez si le point décimal est déjà utilisé: -
// Stop: Multiple decimal points
if((e.keyCode == 190 || e.keyCode == 110) && ((this.value).indexOf(".") >= 0))
e.preventDefault();
J'utilise sous cette forme. Cela me semble correct, autoriser les touches comme home, end, shift et ctrl, avec l'inconvénient de l'utilisateur de pouvoir imprimer des caractères spéciaux:
$("#busca_cep").keydown(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 13 || event.keyCode == 16 || event.keyCode == 36 || event.keyCode == 35) {
if (event.keyCode == 13) {
localiza_cep(this.value);
}
} else {
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
Il y a tellement de bonnes réponses à faire avec Java Script ou jQuery ici.
Je vais ajouter un moyen très facile d'archiver cela en utilisant uniquement HTML5.
<input type="number" name="quantity" min="0" max="9">
Utilisez ci-dessous simple jQuery pour n'autoriser que les caractères numériques dans une boîte à outils. Vous n'avez pas besoin de filtrer manuellement tous les caractères spéciaux, vous ne risquez donc pas de manquer un caractère spécial. Cela autorisera uniquement les chiffres de 0 à 9: (Placez le code ci-dessous dans le document prêt et modifiez le nom de la classe en fonction du nom de la classe de champs de texte numérique.)
//Event of data being keyed in to textbox with class="numericField".
$(".numericField").keyup(function() {
// Get the non Numeric char that was enetered
var nonNumericChars = $(this).val().replace(/[0-9]/g, '');
// Now set the value in text box
$(this).val( $(this).val().replace(nonNumericChars, ''));
});
$(document).ready(function()
{
$("#textBoxId").bind("change",checkInput);
});
function checkInput()
{
// check if $('#textBoxId').val() is under your constraints
// then change its value, removing the last character
// since this event will be called each time you
// type a character
}
Essaye celui-là
$('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
function validate_profile(frmid) {
var form = $('#' + frmid);
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: true, // do not focus the last invalid input
ignore: "",
rules: {
contact_no: {
required: true,
minlength: 10,
maxlength: 10,
number: true
}, email_id: {
required: true,
email: true
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
Metronic.scrollTo(error, -7000);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // un set error class to the control group
$(element)
.closest('.form-group').removeClass('has-success'); // set success class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // un set error class to the control group
$(element)
.closest('.form-group').addClass('has-success'); // set success class to the control group
error.hide();
},
success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.closest('.form-group').addClass('has-success');
},
submitHandler: function (form) {
success.show();
error.hide();
form.submit();
}
});
}
jQuery("#no_of").keypress(function(event){
//Allow only backspace and delete
if (event.keyCode != 46 && event.keyCode != 8) {
if (!parseInt(String.fromCharCode(event.which))) {
event.preventDefault();
}
}
});
jQuery("#no_of").keyup(function(e){
var temp_s= jQuery("#no_of").val();
var multiply_val= temp_s*10;
jQuery("#ex-r").html(multiply_val);
});