maxlength ignoré pour le type d'entrée = "numéro" dans Chrome
L'attribut maxlength ne fonctionne pas avec <input type="number">. Cela se produit uniquement dans Chrome.
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
De la documentation de MDN pour <input>
Si la valeur de l'attribut type est
text,search,password,telouurl, cet attribut spécifie le nombre maximal de caractères (en points de code Unicode) que l'utilisateur peut saisir; pour les autres types de contrôle, il est ignoré.
Donc, maxlength est ignoré sur <input type="number"> par conception.
Selon vos besoins, vous pouvez utiliser les attributs min et max comme suggéré par inon dans sa réponse (NB: cela ne fera que définir une plage contrainte, pas la longueur réelle de la valeur, de -9999 à 9999 couvrira tous les nombres de 0 à 4 chiffres), ou vous pouvez utiliser une entrée de texte normale et appliquer la validation sur le champ avec le nouvel attribut pattern :
<input type="text" pattern="\d*" maxlength="4">
La longueur maximale ne fonctionnera pas avec <input type="number". Le meilleur moyen que je connaisse consiste à utiliser l'événement oninput pour limiter la longueur maximale. S'il vous plaît voir le code ci-dessous.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
Vous pouvez utiliser les attributs min et max .
Le code suivant fait la même chose:
<input type="number" min="-999" max="9999"/>
J'ai deux façons pour toi de faire ça
Premièrement: Utilisez type="tel", cela fonctionnera comme type="number" dans mobile et acceptez maxlength:
<input type="tel" />
Deuxièmement: Utilisez un peu de JavaScript:
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
Beaucoup de gars ont posté un événement onKeyDown() qui ne fonctionne pas du tout, c’est-à-dire que vous ne pouvez pas supprimer une fois que vous avez atteint la limite. Donc, au lieu de onKeyDown(), utilisez onKeyPress() et cela fonctionne parfaitement.
Ci-dessous le code de travail:
User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />Une fois, j’ai eu le même problème et j’ai trouvé cette solution en ce qui concerne mes besoins… Cela peut aider Quelqu'un.
<input type="number" placeholder="Enter 4 Digits" max="9999" min="0"
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>
Bonne codage :)
Voici ma solution avec jQuery ... Vous devez ajouter maxlength à votre type d'entrée = nombre
$('body').on('keypress', 'input[type=number][maxlength]', function(event){
var key = event.keyCode || event.charCode;
var charcodestring = String.fromCharCode(event.which);
var txtVal = $(this).val();
var maxlength = $(this).attr('maxlength');
var regex = new RegExp('^[0-9]+$');
// 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
return true;
}
// maxlength allready reached
if(txtVal.length==maxlength){
event.preventDefault();
return false;
}
// pressed key have to be a number
if( !regex.test(charcodestring) ){
event.preventDefault();
return false;
}
return true;
});
Et gérer copier et coller:
$('body').on('paste', 'input[type=number][maxlength]', function(event) {
//catch copy and paste
var ref = $(this);
var regex = new RegExp('^[0-9]+$');
var maxlength = ref.attr('maxlength');
var clipboardData = event.originalEvent.clipboardData.getData('text');
var txtVal = ref.val();//current value
var filteredString = '';
var combined_input = txtVal + clipboardData;//dont forget old data
for (var i = 0; i < combined_input.length; i++) {
if( filteredString.length < maxlength ){
if( regex.test(combined_input[i]) ){
filteredString += combined_input[i];
}
}
}
setTimeout(function(){
ref.val('').val(filteredString)
},100);
});
J'espère que ça aide quelqu'un.
<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
DEMO - JSFIDDLE
Changez votre type d'entrée en texte et utilisez l'événement "oninput" pour appeler la fonction:
<input type="text" oninput="numberOnly(this.id);" class="test_css" maxlength="4" id="flight_number" name="number"/>
Maintenant, utilisez Javascript Regex pour filtrer les entrées utilisateur et les limiter aux nombres:
function numberOnly(id) {
// Get element by id which passed as parameter within HTML element event
var element = document.getElementById(id);
// Use numbers only pattern, from 0 to 9
var regex = /[^0-9]/gi;
// This removes any other character but numbers as entered by user
element.value = element.value.replace(regex, "");
}
Vous pouvez aussi essayer ceci pour une entrée numérique avec restriction de longueur
<input type="tel" maxlength="4" />
D'après mon expérience, la plupart des problèmes où les gens se demandent pourquoi la variable maxlength est ignorée est due au fait que l'utilisateur est autorisé à entrer plus que le nombre "autorisé" de caractères.
Comme d'autres commentaires l'ont indiqué, les entrées type="number" ne possèdent pas d'attribut maxlength et possèdent plutôt les attributs min et max.
Pour que le champ limite le nombre de caractères pouvant être insérés tout en permettant à l'utilisateur d'en être conscient avant que le formulaire ne soit soumis (le navigateur doit identifier la valeur> max sinon), vous devrez (pour le moment au moins) ajouter un auditeur sur le terrain.
Voici une solution que j'ai utilisée par le passé: http://codepen.io/wuori/pen/LNyYBM
Je sais qu'il y a déjà une réponse, mais si vous voulez que votre entrée se comporte exactement comme l'attribut maxlength ou aussi proche que possible, utilisez le code suivant:
(function($) {
methods = {
/*
* addMax will take the applied element and add a javascript behavior
* that will set the max length
*/
addMax: function() {
// set variables
var
maxlAttr = $(this).attr("maxlength"),
maxAttR = $(this).attr("max"),
x = 0,
max = "";
// If the element has maxlength apply the code.
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {
// create a max equivelant
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
while (x < maxlAttr) {
max += "9";
x++;
}
maxAttR = max;
}
// Permissible Keys that can be used while the input has reached maxlength
var keys = [
8, // backspace
9, // tab
13, // enter
46, // delete
37, 39, 38, 40 // arrow keys<^>v
]
// Apply changes to element
$(this)
.attr("max", maxAttR) //add existing max or new max
.keydown(function(event) {
// restrict key press on length reached unless key being used is in keys array or there is highlighted text
if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
});;
}
},
/*
* isTextSelected returns true if there is a selection on the page.
* This is so that if the user selects text and then presses a number
* it will behave as normal by replacing the selection with the value
* of the key pressed.
*/
isTextSelected: function() {
// set text variable
text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return (text.length > 0);
}
};
$.maxlengthNumber = function(){
// Get all number inputs that have maxlength
methods.addMax.call($("input[type=number]"));
}
})($)
// Apply it:
$.maxlengthNumber();
La solution absolue que j'ai récemment essayée est la suivante:
<input class="class-name" placeholder="1234567" name="elementname" type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
Je vais rendre cela rapide et facile à comprendre!
Au lieu de maxlength pour type='number' (maxlength définit le nombre maximal de lettres d'une chaîne dans un type text), utilisez min='' et max=''.
À votre santé
Chrome (techniquement, clignote) n'implémentera pas maxlength for <input type="number">.
La spécification HTML5 indique que maxlength s'applique uniquement aux types text, url, email, search, tel et mot de passe.