La saisie de texte HTML n'autorise que la saisie numérique
Existe-t-il un moyen rapide de définir une entrée de texte HTML (<input type=text />) pour autoriser uniquement les frappes numériques (plus '.')?
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é.
JavaScript
La fonction setInputFilter 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 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 the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.addEventListener(event, 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);
}
});
});
}
// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\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!
jQuery
Il existe également une version jQuery de cela. 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 .
Utilisez ce DOM
<input type='text' onkeypress='validate(event)' />
Et ce script
function validate(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
J'ai longuement et durement cherché une bonne réponse à cette question, et nous avons désespérément besoin de <input type="number", mais en dehors de cela, ces 2 méthodes sont les plus concises que j'ai pu trouver:
<input type="text"
onkeyup="this.value=this.value.replace(/[^\d]/,'')">
Si vous n'aimez pas le personnage non accepté affiché pendant une fraction de seconde avant d'être effacé, la méthode ci-dessous est ma solution. Notez les nombreuses conditions supplémentaires, afin d'éviter de désactiver toutes sortes de navigation et de raccourcis clavier. Si quelqu'un sait comment compacter cela, faites le nous savoir!
<input type="text"
onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )">
Et un autre exemple, qui fonctionne très bien pour moi:
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
Attache également à l'événement de frappe
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
Et HTML:
<input type="input" id="edit1" value="0" size="5" maxlength="5" />
HTML5 a <input type=number>, ce qui vous convient parfaitement. Actuellement, seul Opera le prend en charge de manière native, mais il y a un projet qui a une implémentation JavaScript.
La plupart des réponses ici ont toutes la faiblesse d’utiliser des événements clés .
Beaucoup de réponses limiteraient votre capacité à sélectionner du texte avec les macros du clavier, le copier/coller et davantage de comportements indésirables. D'autres semblent dépendre de plugins jQuery spécifiques, qui tuent des mouches avec des mitraillettes.
Cette solution simple semble mieux fonctionner pour toutes les plates-formes, quel que soit le mécanisme de saisie utilisé (frappe au clavier, copier + coller, copier + coller avec le bouton droit de la souris, parole, texte, etc.). Toutes les macros du clavier de sélection de texte fonctionneraient toujours et limiteraient même la possibilité de définir une valeur non numérique à l'aide d'un script.
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
J'ai choisi d'utiliser une combinaison des deux réponses mentionnées ici, c'est-à-dire.
<input type="number" />
et
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<input type="text" onkeypress="return isNumberKey(event);">
HTML5 supporte les expressions rationnelles, vous pouvez donc utiliser ceci:
<input id="numbersOnly" pattern="[0-9.]+" type="text">
Attention: certains navigateurs ne le supportent pas encore.
JavaScript
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
en plus, vous pouvez ajouter une virgule, un point et un signe moins (, .-)
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
HTML
<input type="text" onkeydown="validateNumber(event);"/ >
2 solutions:
Utiliser un validateur de formulaire (par exemple avec plugin de validation jQuery )
Effectuez une vérification lors de l'événement onblur (c'est-à-dire lorsque l'utilisateur quitte le champ) du champ de saisie avec l'expression régulière
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>
Si simple....
// Dans une fonction JavaScript (peut utiliser HTML ou PHP).
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Dans votre formulaire de saisie:
<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>
Avec entrée max. (Ce qui précède permet un numéro à 12 chiffres)
Veuillez trouver ci-dessous la solution mentionnée. Dans cet utilisateur peut être en mesure d'entrer uniquement la valeur numeric, l'utilisateur ne peut pas non plus copy, paste, drag et drop en entrée.
Caractères autorisés
0,1,2,3,4,5,6,7,8,9
Interdit les personnages et les personnages à travers les événements
- Valeur alphabétique
- Caractères spéciaux
- Copie
- Coller
- Traîne
- Laissez tomber
$(document).ready(function() {
$('#number').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">Faites-moi savoir si cela ne fonctionne pas.
Une approche plus sûre consiste à vérifier la valeur de l'entrée au lieu de détourner les touches et d'essayer de filtrer les keyCodes.
De cette façon, l'utilisateur est libre d'utiliser les flèches du clavier, les touches de modification, la touche de retour arrière, la suppression, l'utilisation de barres de frappe non standard, l'utilisation de la souris pour coller, le glisser-déposer de texte et même l'utilisation d'entrées d'accessibilité.
Le script ci-dessous permet les nombres positifs et négatifs
1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed
var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;
//enforce that only a float can be inputed
function enforceFloat() {
var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
if (!valid.test(this.value)) {
var n = this.value.match(number);
this.value = n ? n[0] : '';
}
}<input id="number" value="-3.1415" placeholder="Type a number" autofocus>EDIT: J'ai supprimé mon ancienne réponse parce que je pense qu'elle est désuète maintenant.
Vous pouvez utiliser un motif pour cela:
<input id="numbers" pattern="[0-9.]+" type="number">
Vous pouvez voir ici les astuces complètes pour l’interface du site mobile .
Si vous souhaitez suggérer à l'appareil (par exemple un téléphone portable) entre alpha et numérique, vous pouvez utiliser <input type="number">.
Code JavaScript:
function validate(evt)
{
if(evt.keyCode!=8)
{
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key))
{
theEvent.returnValue = false;
if (theEvent.preventDefault)
theEvent.preventDefault();
}
}
}
Code HTML:
<input type='text' name='price' value='0' onkeypress='validate(event)'/>
fonctionne parfaitement car le code de retour arrière est 8 et qu’une expression rationnelle ne le laisse pas; c’est donc un moyen facile de contourner le bogue :)
Une implémentation courte et agréable utilisant jQuery et replace () au lieu de regarder event.keyCode ou event.which:
$('input.numeric').live('keyup', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
Seul petit effet secondaire, la lettre tapée apparaît momentanément et CTRL/CMD + A semble se comporter un peu étrange.
input type="number" est un attribut HTML5.
Dans le cas contraire, cela vous aidera:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
Juste une autre variante avec jQuery utilisant
$(".numeric").keypress(function() {
return (/\d/.test(String.fromCharCode(event.which) ))
});
Un autre exemple où vous pouvez n’ajoutez que des chiffres dans le champ de saisie, ne pouvez pas lettres
<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
<input name="amount" type="text" value="Only number in here"/>
<script>
$('input[name=amount]').keyup(function(){
$(this).val($(this).val().replace(/[^\d]/,''));
});
</script>
Vous pouvez également comparer la valeur d’entrée (qui est traitée comme une chaîne par défaut) à elle-même forcée comme numérique, comme ceci:
if(event.target.value == event.target.value * 1) {
// returns true if input value is numeric string
}
Cependant, vous devez lier cela à un événement comme keyup, etc.
utilisez simplement type = "numéro" maintenant cet attribut supporté par la plupart des navigateurs
<input type="number" maxlength="3" ng-bind="first">
Utilisez ce DOM:
<input type = "text" onkeydown = "validate(event)"/>
Et ce script:
validate = function(evt)
{
if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
... OU ce script, sans indexOf, utilisant deux for ...
validate = function(evt)
{
var CharValidate = new Array("08", "046", "039", "948", "235");
var number_pressed = false;
for (i = 0; i < 5; i++)
{
for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
{
if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
{
number_pressed = true;
}
}
}
if (number_pressed == false)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
J'ai utilisé l'attribut onkeydown au lieu de onkeypress, car l'attribut onkeydown est vérifié avant l'attribut onkeypress. Le problème serait dans le navigateur Google Chrome.
Avec l'attribut "onkeypress", TAB serait incontrôlable avec "preventDefault" sur Google Chrome, cependant, avec l'attribut "onkeydown", TAB devient contrôlable!
Code ASCII pour la tabulation => 9
Le premier script a moins de code que le second, cependant, le tableau de caractères ASCII doit avoir toutes les clés.
Le second script est beaucoup plus gros que le premier, mais le tableau n'a pas besoin de toutes les clés. Le premier chiffre dans chaque position du tableau est le nombre de fois que chaque position sera lue. Pour chaque lecture, sera incrémenté de 1 à la suivante. Par exemple:
NCount = 0
48 + NCount = 48
NCount + +
48 + NCount = 49
NCount + +
...
48 + NCount = 57
Dans le cas des clés numériques, il n’ya que 10 (0 - 9), mais s’ils étaient 1 million, cela n’aurait pas de sens de créer un tableau avec toutes ces clés.
Codes ASCII:
- 8 ==> (retour arrière);
- 46 => (Supprimer);
- 37 => (flèche gauche);
- 39 => (flèche droite);
- 48 - 57 => (nombres);
- 36 => (maison);
- 35 => (fin);
C'est une fonction améliorée:
function validateNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
Ceci est la version étendue de la solution de geowa4 . Prend en charge les attributs min et max. Si le nombre est en dehors de la plage, la valeur précédente sera affichée.
Utilisation: <input type=text class='number' maxlength=3 min=1 max=500>
function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
}
$(document).ready(function(){
$("input[type=text]").filter(".number,.NUMBER").on({
"focus":function(e){
$(e.target).data('oldValue',$(e.target).val());
},
"keypress":function(e){
e.target.oldvalue = e.target.value;
number(e);
},
"change":function(e){
var t = e.target;
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val(),10);
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
}
});
});
Si les entrées sont dynamiques, utilisez ceci:
$(document).ready(function(){
$("body").on("focus","input[type=text].number,.NUMBER",function(e){
$(e.target).data('oldValue',$(e.target).val());
});
$("body").on("keypress","input[type=text].number,.NUMBER",function(e){
e.target.oldvalue = e.target.value;
number(e);
});
$("body").on("change","input[type=text].number,.NUMBER",function(e){
var t = e.target
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val());
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
});
});
La meilleure façon (autoriser TOUS les types de nombres - réel négatif, réel positif, entier négatif, entier positif) est:
$(input).keypress(function (evt){
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
var objRegex = /^-?\d*[\.]?\d*$/;
var val = $(evt.target).val();
if(!regex.test(key) || !objRegex.test(val+key) ||
!theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
};
});
Si vous êtes d'accord avec l'utilisation de plugins, en voici un que j'ai testé. Cela fonctionne bien sauf pour coller.
Voici une démo http://jsfiddle.net/152sumxu/2
Code ci-dessous (Lib collé en ligne)
<div id="plugInDemo" class="vMarginLarge">
<h4>Demo of the plug-in </h4>
<div id="demoFields" class="marginSmall">
<div class="vMarginSmall">
<div>Any Number</div>
<div>
<input type="text" id="anyNumber" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
(function(b) {
var c = { allowFloat: false, allowNegative: false};
b.fn.numericInput = function(e) {
var f = b.extend({}, c, e);
var d = f.allowFloat;
var g = f.allowNegative;
this.keypress(function(j) {
var i = j.which;
var h = b(this).val();
if (i>0 && (i<48 || i>57)) {
if (d == true && i == 46) {
if (g == true && a(this) == 0 && h.charAt(0) == "-") {
return false
}
if (h.match(/[.]/)) {
return false
}
}
else {
if (g == true && i == 45) {
if (h.charAt(0) == "-") {
return false
}
if (a(this) != 0) {
return false
}
}
else {
if (i == 8) {
return true
}
else {
return false
}
}
}
}
else {
if (i>0 && (i >= 48 && i <= 57)) {
if (g == true && h.charAt(0) == "-" && a(this) == 0) {
return false
}
}
}
});
return this
};
function a(d) {
if (d.selectionStart) {
return d.selectionStart
}
else {
if (document.selection) {
d.focus();
var f = document.selection.createRange();
if (f == null) {
return 0
}
var e = d.createTextRange(), g = e.duplicate();
e.moveToBookmark(f.getBookmark());
g.setEndPoint("EndToStart", e);
return g.text.length
}
}
return 0
}
}(jQuery));
$(function() {
$("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
});
</script>
Un moyen simple de résoudre ce problème consiste à implémenter une fonction jQuery pour valider avec regex les caractères saisis dans la zone de texte, par exemple:
Votre code html:
<input class="integerInput" type="text">
Et la fonction js utilisant jQuery
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<input type="text" class="integerInput"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>
<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>
Je pourrais avoir un autre (simple) solution de contournement pour cela ...
Depuis String.fromCharCode (key) retourne des choses étranges sur le clavier AZERTY (le clavier numérique renvoie le code en tant que g pour 1, et 1 pour & caractère ...
J'ai réalisé que saisir la valeur finale de keyup dans l'entrée pour la réinitialiser à une valeur arbitraire est une méthode plus simple, légère et résistante aux bugs (pourrait également être effectuée via des expressions régulières ... pour conserver les décimales, etc. pas besoin de filtrer les autres événements Ctrl, Home, Del et Enter ...)
Utilisation avec jq:
<input class='pn'>
<script>
function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>
Attribut Onkeyup:
<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>
Utilisation:
<script>
function onlyNumber(id){
var DataVal = document.getElementById(id).value;
document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
}
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">
Et si vous souhaitez mettre à jour une valeur après avoir appuyé sur la touche, vous pouvez modifier onChange pour onKeypress , onKeyDown ou onKeyup . Mais l'événement onKeypress ne s'exécute dans aucun navigateur.
C'est la solution facile
Remplacez .price-input input.quantity par la classe de votre entrée
$(".price-input input.quantity").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
Voici une solution simple et agréable que j'aime utiliser:
function numeric_only (event, input) {
if ((event.which < 32) || (event.which > 126)) return true;
return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;
<input type="text" onkeypress="return numeric_only (event, this);" />
Explication:
En utilisant "event.which" - déterminez d’abord s’il s’agit d’un caractère imprimable. Si ce n'est pas le cas, autorisez-le (pour des tâches telles que delete et backspace). Sinon, concatinez le caractère à la fin de la chaîne et testez-le à l'aide de la fonction jQuery "isNumeric". Cela enlève tout l'ennui de tester chaque personnage et fonctionne également pour les scénarios de couper/coller.
Si vous voulez être vraiment mignon, vous pouvez créer un nouveau type d’entrée HTML. Appelons-le "numérique" afin que vous puissiez avoir la balise:
<input type="numeric" />
qui ne permettra que des caractères numériques. Ajoutez simplement la commande "document.ready" suivante:
$(document).ready (function () {
$("input[type=numeric]").keypress (function (event) {
if ((event.which < 32) || (event.which > 126)) return true;
return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
});// numeric.keypress;
});// document.ready;
HTML ne se soucie pas du nom de type que vous utilisez - s'il ne le reconnaît pas, il utilisera un champ de texte par défaut pour vous permettre de le faire. Votre éditeur peut se plaindre mais, hé, c'est son problème. Nul doute que les puritains vont paniquer, mais ça marche, c'est facile et jusqu'à présent, ça a été assez robuste pour moi.
Vous pouvez attacher à l'événement touche bas, puis filtrer les clés selon vos besoins, par exemple:
<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);" type="text">
Et le gestionnaire JavaScript actuel serait:
function validateNUM(e,field)
{
var key = getKeyEvent(e)
if (specialKey(key)) return true;
if ((key >= 48 && key <= 57) || (key == 46)){
if (key != 46)
return true;
else{
if (field.value.search(/\./) == -1 && field.value.length > 0)
return true;
else
return false;
}
}
function getKeyEvent(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
keynum = e.keyCode
else if(e.which) // Netscape/Firefox/Opera
keynum = e.which
return keynum;
}
Attribuez une classe à la zone de saisie (<input class="digit" ...>) et utilisez jquery comme ci-dessous.
jQuery(document).ready(function () {
jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});
Le code ci-dessus fonctionne également pour désactiver les caractères spéciaux dans les traits Ctrl+V et les traits right click.
Rappelez-vous les différences régionales (les euros utilisent des points et des virgules dans le sens inverse de celui des Américains), plus le signe moins (ou la convention qui consiste à mettre un nombre entre parenthèses pour indiquer un négatif), plus une notation exponentielle (je vais sur celui-là).
Vous pouvez remplacer la fonction Shurok par:
$(".numeric").keypress(function() {
return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});
Ma solution pour une meilleure expérience utilisateur:
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 affiche les flèches haut/bas qui réduisent l’espace de saisie réel, je les trouve laides et ne sont utiles que si le nombre représente une quantité (éléments tels que téléphones, indicatifs régionaux, identifiants, mais n’en ont pas besoin) tel fournit des informations similaires validations de navigateur de nombre sans 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).
Le code ci-dessous vérifie égalementCOLLERévénement.
Décommentez "ruleSetArr_4" et ajoutez (concatez) à "ruleSetArr" pour autoriserFLOATnombres.
Fonction copier/coller facile. Appelez-le avec votre élément d’entrée en paramètre.
Exemple: inputIntTypeOnly($('input[name="inputName"]'))
function inputIntTypeOnly(Elm){
Elm.on("keydown",function(event){
var e = event || window.event,
key = e.keyCode || e.which,
ruleSetArr_1 = [8,9,46], // backspace,tab,delete
ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57], // top keyboard num keys
ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
ruleSetArr_4 = [17,67,86], // Ctrl & V
//ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4); // merge arrays of keys
if(ruleSetArr.indexOf() !== "undefined"){ // check if browser supports indexOf() : IE8 and earlier
var retRes = ruleSetArr.indexOf(key);
} else {
var retRes = $.inArray(key,ruleSetArr);
};
if(retRes == -1){ // if returned key not found in array, return false
return false;
} else if(key == 67 || key == 86){ // account for paste events
event.stopPropagation();
};
}).on('paste',function(event){
var $thisObj = $(this),
origVal = $thisObj.val(), // orig value
newVal = event.originalEvent.clipboardData.getData('Text'); // paste clipboard value
if(newVal.replace(/\D+/g, '') == ""){ // if paste value is not a number, insert orig value and ret false
$thisObj.val(origVal);
return false;
} else {
$thisObj.val(newVal.replace(/\D+/g, ''));
return false;
};
});
};
var inptElm = $('input[name="inputName"]');
inputIntTypeOnly(inptElm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="inputName" value="1">J'utilise la bibliothèque jquery.inputmask.js que vous pouvez télécharger depuis NuGet . Plus précisément, j'utilise jquery.inputmask.regex.extensions.js qui l'accompagne.
Je donne une classe à l'élément input, dans ce cas reg:
<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>
Et puis en JavaScript je règle le masque:
var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });
Cela ne concerne que les chiffres, mais vous pouvez modifier l'expression régulière pour qu'elle accepte ".".
En utilisant cela, il est impossible d'entrer des caractères qui ne sont pas des chiffres ..__ Il est utile de disposer de ces bibliothèques de masques de saisie pour la mise en forme générale.
Un autre moyen facile avec jQuery:
$('.Numeric').bind('keydown',function(e){
if (e.which < 48 || e.which > 57)
return false;
return true;
})
Maintenant, réglez chaque classe d’entrée sur Numeric, comme ceci:
<input type="text" id="inp2" name="inp2" class='Numeric' />
Pour ceux d'entre vous qui aiment one-liners .
string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
J'utilise ce code sur une entrée type = "text", et avec AngularJS pour l'activer au clavier, mais vous pouvez utiliser jQuery si vous aimez Il suffit de mettre ce code dans une fonction qui s’active d’une manière ou d’une autre.
Il n'autorise que les chiffres, chiffres + décimal, chiffres + décimal + chiffres.
CODE
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";
testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";
testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";
testFour = "622632463.23464236326324363"
=> "622632463.23";
Ceci a été construit pour la devise américaine, mais il peut être modifié pour permettre plus de deux décimales après la première décimale, comme dans ce qui suit ...
CODE MODIFIE
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');
testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";
:)
function digitsOnly(obj) {
obj.value = obj.value.replace(/\D/g, "");
}
et dans l'élément
<input type="text" onkeyup="digitsOnly(this);" />
Oui, HTML5 le fait. Essayez ce code ( w3school ):
<!DOCTYPE html>
<html>
<body>
<form action="">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
<input type="submit" />
</form>
</body>
</html>
Cela supprime instantanément tout mauvais caractère, n'autorise qu'un point, est court et permet un retour arrière, etc.
$('.numberInput').keyup(function () {
s=$(this).val();
if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
J'ai vu d'excellentes réponses, mais je les aime aussi petites et simples que possible, alors peut-être que quelqu'un en profitera. J'utiliserais les fonctionnalités javascript Number() et isNaN comme ceci:
if(isNaN(Number(str))) {
// ... Exception it is NOT a number
} else {
// ... Do something you have a number
}
J'espère que cela t'aides.
Je l'ai modifié un peu, mais il faut encore beaucoup de travail pour se conformer à la façon bizarre de JavaScript.
function validateNumber(myEvent,decimal) {
var e = myEvent || window.event;
var key = e.keyCode || e.which;
if (e.shiftKey) {
} else if (e.altKey) {
} else if (e.ctrlKey) {
} else if (key === 48) { // 0
} else if (key === 49) { // 1
} else if (key === 50) { // 2
} else if (key === 51) { // 3
} else if (key === 52) { // 4
} else if (key === 53) { // 5
} else if (key === 54) { // 6
} else if (key === 55) { // 7
} else if (key === 56) { // 8
} else if (key === 57) { // 9
} else if (key === 96) { // Numeric keypad 0
} else if (key === 97) { // Numeric keypad 1
} else if (key === 98) { // Numeric keypad 2
} else if (key === 99) { // Numeric keypad 3
} else if (key === 100) { // Numeric keypad 4
} else if (key === 101) { // Numeric keypad 5
} else if (key === 102) { // Numeric keypad 6
} else if (key === 103) { // Numeric keypad 7
} else if (key === 104) { // Numeric keypad 8
} else if (key === 105) { // Numeric keypad 9
} else if (key === 8) { // Backspace
} else if (key === 9) { // Tab
} else if (key === 13) { // Enter
} else if (key === 35) { // Home
} else if (key === 36) { // End
} else if (key === 37) { // Left Arrow
} else if (key === 39) { // Right Arrow
} else if (key === 190 && decimal) { // decimal
} else if (key === 110 && decimal) { // period on keypad
// } else if (key === 188) { // comma
} else if (key === 109) { // minus
} else if (key === 46) { // Del
} else if (key === 45) { // Ins
} else {
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
Et puis ça s'appelle via:
$('input[name=Price]').keydown(function(myEvent) {
validateNumber(myEvent,true);
});
J'espère que je ne bat pas un cheval mort avec un vilain bâton ici, mais je l'utilise pour la saisie de la quantité sur mon site Web. Il ne permet que des nombres de 1 à 99.
Essayez-le: https://jsfiddle.net/83va5sb9/
<input min="1" type="text" id="quantity" name="quantity" value="1"
onKeyUp="numbersonly()">
<script>
function numbersonly() {
var str = document.getElementById("quantity").value
var newstr = ""
for (i = 0; i < str.length; i++) {
for (ii = 1; ii < 10; ii++) {
if (str.charAt(i).indexOf(ii) > -1) {
newstr += str.charAt(i)
}
}
}
if (newstr == "") {
newstr = 1
}
if (parseInt(newstr) > 99) {
newstr = 99
}
document.getElementById("quantity").value = newstr
}
</script>
Les expressions régulières et la fonction de correspondance peuvent bien fonctionner dans cette situation. Par exemple, j'ai utilisé ce qui suit pour valider 4 zones de saisie servant de coordonnées sur un graphique. Cela fonctionne raisonnablement bien.
function validateInput() {
if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
location.reload();
}
}
Vous pouvez essayer d'utiliser l'événement '' 'onkeydown' '' et d'annuler l'événement (event.preventDefault ou quelque chose du genre) lorsque ce n'est pas l'une des clés autorisées.
Appelez cette fonction lorsque vous êtes prêt à valider quoi que ce soit. J'ai utilisé une zone de texte ici
Dans mon HTML:
<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />
Dans mon code JavaScript:
function check(num){
var onlynumbers = true
for (var i = 0; i < (num.length - 1); i++) {
if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
alert("please make sure that only numbers have been entered in the Quantaty box");
onlynumbers = false
}
}
if (onlynumbers == true) {
//Execute Code
}
}
Voici une solution très courte qui n'utilise pas les valeurs obsolètes keyCode ou which, ne bloque aucune clé non en entrée et utilise du javascript pur. (Testé sur Chrome 70.0.3533, Firefox 62.0 et Edge 42.17134.1.0)
HTML:
<input type="text" onkeypress="validate(event)">
JS:
function validate(ev) {
if (!ev) {
ev = window.event;
}
if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
return ev.preventDefault();
}
}
Je cherchais un moyen de bloquer une entrée de chiffres, puis, comme je ne le trouvais pas dans les réponses, ce code me convenait parfaitement.
Je dois juste le saisir dans l'événement onkeypress.
Si vous avez juste besoin de bloquer une entrée de chiffres, je pense que cela fonctionnera bien.
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
Je réalise un ancien post mais je pensais que cela pourrait aider quelqu'un. Récemment, j'ai dû limiter une zone de texte à 5 décimales. Dans mon cas, AUSSI, l'entrée des utilisateurs devait être inférieure à 0,1
<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText" name="textfield" onkeyup="return doCheck('#fmargin',event);">
Voici la fonction doCheck
function doCheck(id,evt)
{
var temp=parseFloat($(id).val());
if (isNaN(temp))
temp='0.0';
if (temp==0)
temp='0.0';
$(id).val(temp);
}
Voici la même fonction sauf pour forcer la saisie d'un entier
function doCheck(id,evt)
{
var temp=parseInt($(id).val());
if (isNaN(temp))
temp='0';
$(id).val(temp);
}
espérons que cela aide quelqu'un
J'ai fini d'utiliser cette fonction:
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) return false;"
Cela fonctionne bien dans IE et Chrome, je ne sais pas pourquoi cela ne fonctionne pas aussi bien dans Firefox, cette fonction bloque la touche de tabulation dans Firefox.
Pour que la touche de tabulation fonctionne correctement dans Firefox, ajoutez ceci:
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
Lorsqu'il s'agit de sécuriser l'UX, il faut toujours essayer de garder un point de référence pour "l'intelligence de l'utilisateur".
Tout en négligeant tout ce qui est autre que des chiffres, un point et un trait d'union sembleraient être le choix idéal, vous devriez également envisager de les laisser saisir n'importe quel contenu et, lorsqu'ils sont terminés, purifier l'entrée; Si ce n'est pas un nombre valide, show error . Cette méthode ferait en sorte que le résultat soit toujours valide, peu importe ce que l'utilisateur réussit à faire. Si l'utilisateur est assez naïf pour ne pas comprendre les avertissements et les messages d'erreur, appuyer sur un bouton et constater que rien ne se passe (comme dans la comparaison de codes clés) ne fera que le perturber davantage.
De plus, pour les formulaires, la validation et l'affichage de messages d'erreur sont presque une nécessité. Donc, les dispositions sont peut-être déjà là. Voici l'algorithme:
En cas de perte de focus ou de soumission de formulaire, procédez comme suit.
1.1. Lire le contenu de l'entrée et appliquer parseFloat au résultat
1.2. Si le résultat est un numéro non accessible (NaN), réinitialisez le champ de saisie et affiche un message d'erreur: "Veuillez entrer un nombre valide: Par exemple, 235 ou -654 ou 321,526 ou - 6352.646584 ".
1.3. Sinon, si String (résultat)! == (contenu de l'entrée), modifie la valeur du champ en résultat et affiche warning message : "La valeur que vous avez entrée a été modifiée. L'entrée doit être un nombre valide : par exemple 235 ou -654 ou 321.526 ou -6352.646584 ". Pour un champ qui ne peut autoriser aucune valeur non confirmée, cette condition peut être ajoutée à l'étape 1.2.
1.4. Sinon, ne faites rien.
Cette méthode vous donne également l’avantage supplémentaire d’effectuer des validations sur valeur minimale, valeur maximale, décimales, etc. si nécessaire. Il suffit de faire ces opérations sur le résultat après l’étape 1.2.
Désavantages:
L'entrée permettra à l'utilisateur de saisir n'importe quelle valeur jusqu'à ce que le focus soit perdu ou que le formulaire soit soumis. Mais si les instructions pour remplir le champ étaient suffisamment claires, dans 90% des cas, cela pourrait ne pas se produire.
Si l'étape 1.3 est utilisée pour afficher un avertissement, il peut être négligé par l'utilisateur et entraîner une soumission d'entrée non intentionnelle. Lancer une erreur ou afficher l'avertissement correctement résoudrait le problème.
La vitesse. En microsecondes, cela peut être plus lent que la méthode regex.
Avantages: En supposant que l'utilisateur dispose des connaissances de base pour lire et comprendre,
Très personnalisable avec des options.
Fonctionne avec plusieurs navigateurs et indépendamment de la langue.
Utilise les fonctionnalités déjà disponibles sous une forme pour afficher les erreurs et les avertissements.
cela fonctionne aussi pour le nombre arabe et persan :)
setNumericInput: function (event) {
var key = window.event ? event.keyCode : event.which
if (event.keyCode === 8 ||
(key >= 48 && key <= 57) ||
(key >= 1776 && key <= 1785)) {
return true
} else {
event.preventDefault()
}
}