jQuery: quel est le meilleur moyen de restreindre la saisie "numérique" uniquement pour les zones de texte? (autoriser les points décimaux)
Quel est le meilleur moyen de restreindre la saisie de "chiffres" uniquement aux zones de texte?
Je cherche quelque chose qui permette des points décimaux.
Je vois beaucoup d'exemples. Mais je n'ai pas encore décidé lequel utiliser.
Mise à jour de Praveen Jeganathan
Plus de plugins, jQuery a implémenté sa propre jQuery.isNumeric() ajoutée à la v1.7 . Voir: https://stackoverflow.com/a/20186188/66767
Mettre à jour
Il existe une nouvelle solution très simple pour cela:
Il vous permet d'utiliser le type de filtre d'entrée any sur un texte
<input>, y compris divers filtres numériques. Cela gérera correctement Copier + Coller, Glisser + Déposer, raccourcis clavier, opérations du menu contextuel, touches non typables et toutes les dispositions de clavier.
Voir cette réponse ou essayez vous-même sur JSFiddle .
plugin jquery.numeric
J'ai implémenté avec succès de nombreux formulaires avec le plugin jquery.numeric .
$(document).ready(function(){
$(".numeric").numeric();
});
De plus, cela fonctionne avec textareas aussi!
Cependant, notez que Ctrl + A, Copier + Coller (via le menu contextuel) et Drag + Drop fonctionneront pas comme prévu.
HTML 5
Avec une prise en charge plus large de la norme HTML 5, nous pouvons utiliser l'attribut pattern et le type number pour les éléments input afin de limiter l'entrée au nombre uniquement. Dans certains navigateurs (notamment Google Chrome), il est également interdit de coller du contenu non numérique. Plus d’informations sur number et d’autres types d’entrée plus récents sont disponibles ici .
Si vous souhaitez limiter la saisie (par opposition à la validation), vous pouvez utiliser les événements clés. quelque chose comme ça:
<input type="text" class="numbersOnly" value="" />
Et:
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
Cela indique immédiatement à l'utilisateur qu'il ne peut pas entrer de caractères alphabétiques, etc., plutôt que plus tard au cours de la phase de validation.
Vous voudrez toujours valider, car l'entrée peut être complétée par un copier-coller avec la souris ou éventuellement par un formulaire autocompléteur qui peut ne pas déclencher les événements clés.
Je pensais que la meilleure réponse était celle ci-dessus.
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
mais je conviens que c’est un peu pénible que les touches fléchées et le bouton de suppression accrochent le curseur à la fin de la chaîne (et à cause de cela, il m’a été renvoyé lors des tests)
J'ai ajouté dans un simple changement
$('.numbersOnly').keyup(function () {
if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
this.value = this.value.replace(/[^0-9\.]/g, '');
}
});
ainsi, s'il y a un appui sur un bouton qui ne va pas modifier le texte, il suffit de l'ignorer. Avec cela, vous pouvez frapper les flèches et supprimer sans sauter à la fin, mais cela efface tout texte non numérique.
Le plugin jquery.numeric a quelques bugs que j'ai notifiés à l'auteur. Il permet plusieurs points décimaux dans Safari et Opera, et vous ne pouvez pas saisir de retour arrière, de touches de direction ou plusieurs autres caractères de contrôle dans Opera. J'avais besoin d'une entrée entière positive, alors j'ai fini par écrire la mienne à la fin.
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
Plus de plugins, jQuery a implémenté son propre jQuery.isNumeric () ajouté dans v1.7.
jQuery.isNumeric( value )Détermine si son argument est un nombre.
Résultats d'échantillons
$.isNumeric( "-10" ); // true
$.isNumeric( 16 ); // true
$.isNumeric( 0xFF ); // true
$.isNumeric( "0xFF" ); // true
$.isNumeric( "8e5" ); // true (exponential notation string)
$.isNumeric( 3.1415 ); // true
$.isNumeric( +10 ); // true
$.isNumeric( 0144 ); // true (octal integer literal)
$.isNumeric( "" ); // false
$.isNumeric({}); // false (empty object)
$.isNumeric( NaN ); // false
$.isNumeric( null ); // false
$.isNumeric( true ); // false
$.isNumeric( Infinity ); // false
$.isNumeric( undefined ); // false
Voici un exemple de lien entre isNumeric () et l'écouteur d'événement
$(document).on('keyup', '.numeric-only', function(event) {
var v = this.value;
if($.isNumeric(v) === false) {
//chop off the last char entered
this.value = this.value.slice(0,-1);
}
});
Le plugin numeric () mentionné ci-dessus ne fonctionne pas dans Opera (vous ne pouvez pas revenir en arrière, supprimer ou même utiliser les touches Précédent ou Suivant).
Le code ci-dessous dans JQuery ou Javascript fonctionnera parfaitement (et ce n’est que deux lignes).
JQuery:
$(document).ready(function() {
$('.key-numeric').keypress(function(e) {
var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
if (verified) {e.preventDefault();}
});
});
Javascript:
function isNumeric(e)
{
var keynum = (!window.event) ? e.which : e.keyCode;
return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}
Bien sûr, cela ne concerne que la saisie numérique (plus les touches retour arrière, suppression, avance/retour), mais peut facilement être modifié pour inclure des points et des caractères moins.
Vous pouvez utiliser le plugin Validation avec sa méthode number () .
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
Nul besoin du code long pour la restriction de saisie de numéro, essayez simplement ce code.
Il accepte également les valeurs valides int et float.
Approche Javascript
onload =function(){
var ele = document.querySelectorAll('.number-only')[0];
ele.onkeypress = function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
return false;
}
ele.onpaste = function(e){
e.preventDefault();
}
}<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />approche jQuery
$(function(){
$('.number-only').keypress(function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />METTRE &AGRAVE; JOUR
Les réponses ci-dessus sont pour la plupart des cas d'utilisation courants - validation de l'entrée sous forme de nombre.
Mais ci-dessous est l'extrait de code pour les cas d'utilisation spéciaux
- Permettre des nombres négatifs
- Afficher la frappe invalide avant de la supprimer.
$(function(){
$('.number-only').keyup(function(e) {
if(this.value!='-')
while(isNaN(this.value))
this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
.split('').reverse().join('');
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />Ci-dessous se trouve ce que j’utilise pour bloquer littéralement les frappes. Cela permet uniquement les nombres 0-9 et un point décimal. Facile à implémenter, pas beaucoup de code, et fonctionne à merveille:
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
} else {
return true;
}
}
</script>
<input value="" onkeypress="return isNumberKey(event)">
Comme légère amélioration par rapport à cette suggestion , vous pouvez utiliser le plugin Validation avec ses méthodes number () , digits et range . Par exemple, ce qui suit garantit que vous obtenez un entier positif compris entre 0 et 50:
$("#myform").validate({
rules: {
field: {
required: true,
number: true,
digits: true,
range : [0, 50]
}
}
});
Vous ne voyez pas les alphabets apparition magique et disparition sur la touche. Cela fonctionne aussi avec la souris.
$('#txtInt').bind('input propertychange', function () {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
J'ai d'abord essayé de résoudre cela en utilisant jQuery, mais je n'étais pas content que des caractères non désirés (non digits) apparaissent réellement dans le champ de saisie juste avant d'être supprimés lors de la modification.
À la recherche d'autres solutions, j'ai trouvé ceci:
Entiers (non négatifs)
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0 ||
/\d/.test(String.fromCharCode(oKeyEvent.charCode));
}
</script>
<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput"
onkeypress="return numbersOnly(this, event);"
onpaste="return false;" /></p>
</form>
Source: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Exemple en direct: http://jsfiddle.net/u8sZq/
Points décimaux (non négatif)
Pour permettre un seul point décimal, vous pouvez faire quelque chose comme ceci:
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
var s = String.fromCharCode(oKeyEvent.charCode);
var containsDecimalPoint = /\./.test(oToCheckField.value);
return oKeyEvent.charCode === 0 || /\d/.test(s) ||
/\./.test(s) && !containsDecimalPoint;
}
</script>
Source: vient d'écrire ceci. Semble fonctionner ... Exemple en direct: http://jsfiddle.net/tjBsF/
Autres personnalisations
- Pour autoriser la saisie d'un plus grand nombre de symboles, ajoutez-les simplement à l'expression régulière qui agit en tant que filtre de code de caractère de base.
- Pour implémenter des restrictions contextuelles simples, examinez le contenu actuel (état) du champ de saisie (oToCheckField.value).
Certaines choses que vous pourriez être intéressé à faire:
- Un seul point décimal autorisé
- N'autorisez le signe moins que s'il est placé au début de la chaîne. Cela permettrait des nombres négatifs.
Lacunes
- La position du curseur n'est pas disponible dans la fonction. Cela a considérablement réduit les restrictions contextuelles que vous pouvez implémenter (par exemple, pas deux symboles égaux consécutifs). Vous ne savez pas quel est le meilleur moyen d'y accéder.
Je sais que le titre demande des solutions jQuery, mais j'espère que quelqu'un trouvera cela utile quand même.
window.jQuery.fn.ForceNumericOnly =
function () {
return this.each(function () {
$(this).keydown(function (event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
} else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
});
};
Et appliquez cela sur toutes les entrées souhaitées:
$('selector').ForceNumericOnly();
Merci pour le poste Dave Aaron Smith
J'ai modifié votre réponse pour accepter les décimales et les nombres de la section numérique. Ce travail est parfait pour moi.
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section
(48 == event.which && $(this).attr("value")) || // No 0 first digit
(96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
HTML5 prend en charge le numéro de type d'entrée avec un support de navigateur global supérieur à 88% selon CanIUse à compter d'octobre 2015.
<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />
Ce n’est pas une solution liée à JQuery, mais l’avantage est que, sur les téléphones mobiles, le clavier Android sera optimisé pour la saisie de chiffres.
Alternativement, il est possible d'utiliser le texte de type d'entrée avec le nouveau paramètre "pattern". Plus de détails dans les spécifications HTML5.
Je pense que c'est mieux que la solution jQuery, puisque dans cette question, la solution fournie jQuery ne supporte pas le séparateur de milliers. Si vous pouvez utiliser HTML5.
JSFiddle: https://jsfiddle.net/p1ue8qxj/
Cette fonction fait la même chose, utilise certaines des idées ci-dessus.
$field.keyup(function(){
var val = $j(this).val();
if(isNaN(val)){
val = val.replace(/[^0-9\.]/g,'');
if(val.split('.').length>2) val =val.replace(/\.+$/,"");
}
$j(this).val(val);
});
- afficher un retour visuel (une lettre incorrecte apparaît avant de disparaître)
- permet les décimales
- attrape plusieurs "."
- n'a aucun problème avec left/right del etc.
/*il s’agit de la version multi-navigateur de Comment autoriser uniquement la saisie numérique (0 à 9) dans une boîte de saisie HTML à l’aide de jQuery?
* /
$("#inputPrice").keydown(function(e){
var keyPressed;
if (!e) var e = window.event;
if (e.keyCode) keyPressed = e.keyCode;
else if (e.which) keyPressed = e.which;
var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
// Allow: Ctrl+A
(keyPressed == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(keyPressed >= 35 && keyPressed <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
e.preventDefault();
}
}
});
Je pense que c'est un bon moyen de résoudre ce problème et que c'est extrêmement simple:
$(function() {
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
var regex = /^[0-9]+\.?[0-9]*$/;
if (this.value.length > 0 && !regex.test(this.value)) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
});
});
Exemple:JSFiddle
Scénarios couverts
La plupart des recommandations similaires ici échouent au moins une de ces recommandations ou nécessitent beaucoup de code pour couvrir tous ces scénarios.
- Autorise uniquement 1 point décimal.
- Permet les touches
home,endetarrow. - Permet à
deleteetbackspaced'être utilisés dans n'importe quel index. - Permet l'édition à n'importe quel index (tant que l'entrée correspond à la regex).
- Autorise les touches Ctrl + v et Maj + Insérer pour une entrée valide (idem avec clic droit + coller).
- Ne scintille pas la valeur du texte car l'événement
keyupn'est pas utilisé. - Restaure la sélection après une entrée invalide.
Scénarios échoué
- Commencer par
0.5et ne supprimer que le zéro ne fonctionnera pas. Pour résoudre ce problème, modifiez l'expression régulière en/^[0-9]*\.?[0-9]*$/, puis ajoutez un événement de flou pour ajouter un0lorsque la zone de texte commence par un point décimal (si vous le souhaitez). Voir ceci scénario avancé _ pour une meilleure idée de comment résoudre ce problème.
Brancher
J'ai créé ce simple plugin jquery pour rendre cela plus facile:
$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);
Vous pouvez utiliser autoNumeric à partir de decorplanit.com . Ils ont un support Nice pour le numérique, ainsi que la monnaie, les arrondis, etc.
J'ai utilisé dans un environnement IE6, avec peu d'ajustements CSS, et ce fut un succès raisonnable.
Par exemple, une classe css numericInput pourrait être définie et pourrait être utilisée pour décorer vos champs avec les masques de saisie numérique.
adapté du site Web autoNumeric:
$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
C’est un extrait que je viens de faire (en utilisant une partie du code de Peter Mortensen/Keith Bentrup) pour un pourcentage de validation entier sur un champ de texte (jQuery est requis):
/* This validates that the value of the text box corresponds
* to a percentage expressed as an integer between 1 and 100,
* otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
if (!isNaN(parseInt(this.value,10))) {
this.value = parseInt(this.value);
} else {
this.value = 0;
}
this.value = this.value.replace(/[^0-9]/g, '');
if (parseInt(this.value,10) > 100) {
this.value = 100;
return;
}
});
Ce code:
- Permet d'utiliser les touches numériques principales et le pavé numérique.
- Valide pour exclure les caractères Shift-numériques (par exemple #, $,%, etc.)
- Remplace les valeurs NaN par 0
- Remplace par 100 valeurs supérieures à 100
J'espère que cela aide les personnes dans le besoin.
Si vous utilisez HTML5, vous n'avez pas besoin de faire beaucoup d'efforts pour valider. Il suffit d'utiliser -
<input type="number" step="any" />
L'attribut step permet à la virgule d'être valide.
Le meilleur moyen consiste à vérifier les contects de la zone de texte chaque fois qu'elle perd le focus.
Vous pouvez vérifier si le contenu est un "nombre" à l'aide d'une expression régulière.
Ou vous pouvez utiliser le plugin Validation, qui le fait automatiquement.
Vérifiez ce code de recherche pour l'utilisation de la base de données:
function numonly(root){
>>var reet = root.value;
var arr1 = reet.length;
var ruut = reet.charAt(arr1-1);
>>>if (reet.length > 0){
var regex = /[0-9]|\./;
if (!ruut.match(regex)){
var reet = reet.slice(0, -1);
$(root).val(reet);
>>>>}
}
}
//Then use the even handler onkeyup='numonly(this)'
J'ai trouvé une bonne solution ici http://ajax911.com/numbers-numeric-field-jquery/
Je viens de changer le "keyup" à "keydown" selon mes besoins
Il suffit de lancer le contenu avec parseFloat (). Il retournera NaN sur une entrée invalide.
Autre moyen de conserver la position du curseur sur l’entrée:
$(document).ready(function() {
$('.numbersOnly').on('input', function() {
var position = this.selectionStart - 1;
fixed = this.value.replace(/[^0-9\.]/g, ''); //remove all but number and .
if(fixed.charAt(0) === '.') //can't start with .
fixed = fixed.slice(1);
var pos = fixed.indexOf(".") + 1;
if(pos >= 0)
fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', ''); //avoid more than one .
if (this.value !== fixed) {
this.value = fixed;
this.selectionStart = position;
this.selectionEnd = position;
}
});
});
Avantages:
- L'utilisateur peut utiliser les touches fléchées, Retour arrière, Supprimer, ...
- Fonctionne lorsque vous voulez coller des nombres
Plunker: Démonstration de travail
C'est très simple, nous avons déjà une fonction JavaScript intégrée "isNaN".
$("#numeric").keydown(function(e){
if (isNaN(String.fromCharCode(e.which))){
return false;
}
});
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
Ce code a très bien fonctionné sur moi, il me suffisait d'ajouter 46 dans le tableau controlKeys pour utiliser le point, bien que je ne pense pas que ce soit la meilleure façon de le faire;)
j'utilise cette fonction et ça marche bien
$(document).ready(function () {
$("#txt_Price").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
//if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))
if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
J'ai utilisé James Nelli answer et ajouté onpaste = "return false;" (Håvard Geithus) pour s’assurer que seul l’entier est entré dans l’entrée. Même si vous essayez de coller, cela ne le permettra pas.
Le plugin jquery.numeric fonctionne également pour moi.
La seule chose que je n'aime pas, c'est l'intuitivité. Les touches de raccourci sont "interdites" sans aucun retour à l'utilisateur, qui peut devenir paranoïaque ou se demander si son clavier est cassé.
J'ai ajouté un second rappel au plugin pour faire un retour simple sur une entrée bloquée:
$('#someInput').numeric(
null, // default config
null, // no validation onblur callback
function(){
// for every blocked keypress:
$(this).effect("pulsate", { times:2 }, 100);
}
);
Juste un exemple (en utilisant jQuery UI), bien sûr. Un simple retour visuel aiderait.
Il existe un plugin jquery appelé Jquery Mask Plugin , conçu pour créer des masques sur les champs de formulaire et les éléments html, mais vous pouvez également l'utiliser pour définir simplement le type de données pouvant être saisi à l'intérieur d'un champ:
$('.numeric-input').mask('0#');
Désormais, seuls les numéros seront autorisés dans votre champ de formulaire.
Utilisation de l'événement de frappe
- Méthode Array
var asciiCodeOfNumbers = [48, 49, 50, 51, 52, 53, 54, 54, 55, 56, 57]
$(".numbersOnly").keypress(function (e) {
if ($.inArray(e.which, asciiCodeOfNumbers) == -1)
e.preventDefault();
});
- Méthode directe
$(".numbersOnly").keypress(function (e) {
if (e.which < 48 || 57 < e.which)
e.preventDefault();
});
Je viens de trouver un plug-in encore plus performant . Vous donne beaucoup plus de contrôle .. Supposons que vous ayez un champ DOB où vous avez besoin que ce soit numérique mais acceptant également "/" ou "-" personnages.
Cela fonctionne très bien!
Consultez-le à l’adresse http://itgroup.com.ph/alphanumeric/ .
Je l'ai utilisé avec de bons résultats.
ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
var charcode = (e.which) ? e.which : e.keyCode;
// for decimal point
if(!(charcode===190 || charcode===110))
{ // for numeric keys andcontrol keys
if (!((charcode>=33 && charcode<=57) ||
// for numpad numeric keys
(charcode>=96 && charcode<=105)
// for backspace
|| charcode==8))
{
alert("Sorry! Only numeric values allowed.");
$("#id").val(ini);
}
// to include decimal point if first one has been deleted.
if(charcode===8)
{
ini=ini.split("").reverse();
if(ini[0]==".")
a=0;
}
}
else
{
if(a==1)
{
alert("Sorry! Second decimal point not allowed.");
$("#id").val(ini);
}
a=1;
}
ini=$("#id").val();
});
find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
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);
});
Pour une solution avec input [type = nombre], voir ma réponse complète ici
AUTORISE AUSSI LES NUMEROS NEGATIFS
Le code suivant accepte également les nombres négatifs
HTML
<input type="text" name="myText" />
JS
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
}).on('blur', function(){
if(this.value == '-')
this.value = '';
});
J'ai ce code qui fait très bien le travail pour moi.
var prevVal = '';
$(".numericValue").on("input", function (evt) {
var self = $(this);
if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
prevVal = self.val()
} else {
self.val(prevVal);
}
if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
evt.preventDefault();
}
});
Ce code appartient à restreindre les alphabets dans les zones de texte, vous devez entrer un nombre valide pour valider lors de la frappe. J'espère que cela vous aidera.
Balises HTML:
<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />
function onlyNumbers (key) {
var keycode = (key.which) ? key.which : key.keyCode
if ((keycode > 47 && keycode < 58) || (keycode == 46 || keycode == 8) || (keycode == 9 || keycode == 13) || (keycode == 37 || keycode == 39)) {
return true;
}
else {
return false;
}
}