Comment puis-je limiter les entrées possibles dans un élément "nombre" HTML5?
Pour <input type="number"> élément, maxlength ne fonctionne pas. Comment puis-je restreindre la maxlength pour cet élément de nombre?
Et vous pouvez ajouter un attribut max qui spécifiera le plus grand nombre possible que vous pouvez insérer
<input type="number" max="999" />
si vous ajoutez une valeur max et une valeur min, vous pouvez spécifier la plage de valeurs autorisées:
<input type="number" min="1" max="999" />
Ce qui précède va toujours pas empêcher un utilisateur d'entrer manuellement une valeur en dehors de la plage spécifiée. Au lieu de cela, il affichera une fenêtre contextuelle lui demandant de saisir une valeur dans cette plage lors de la soumission du formulaire, comme indiqué dans cette capture d'écran:
Vous pouvez spécifier les attributs min et max, qui autoriseront l'entrée uniquement dans une plage spécifique.
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
Cela ne fonctionne cependant que pour les boutons de commande rotatifs. Bien que l'utilisateur puisse taper un nombre supérieur à la variable autorisée max, le formulaire ne sera pas soumis.
Capture d'écran prise à partir de Chrome 15
Vous pouvez utilisez l’événement HTML5 oninput en JavaScript pour limiter le nombre de caractères:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
Si vous recherchez une solution Web mobile dans laquelle vous souhaitez que votre utilisateur voie un pavé numérique plutôt qu'un clavier en texte intégral. Utilisez type = "tel". Cela fonctionnera avec maxlength, ce qui vous évitera de créer du javascript supplémentaire.
Max et Min permettent toujours à l'utilisateur de taper des nombres supérieurs à max et min, ce qui n'est pas optimal.
Vous pouvez combiner tous ces éléments comme ceci:
<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />
<script>
// This is an old version, for a more recent version look at
// https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
function maxLengthCheck(object)
{
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
</script>
Mettre à jour:
Vous pouvez également vouloir empêcher la saisie de caractères non numériques, car object.length serait une chaîne vide pour les entrées numériques et sa longueur serait donc 0. Ainsi, la fonction maxLengthCheck ne fonctionnera pas.
Solution:
Voir this ou this pour des exemples.
Démo - Voir la version complète du code ici:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
Mise à jour 2: Voici le code de mise à jour: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
Mise à jour 3:Veuillez noter que le fait de permettre la saisie de plusieurs décimales peut gâcher la valeur numérique.
c’est très simple, avec du javascript, vous pouvez simuler une maxlength
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
Ou si votre valeur maximale est par exemple 99 et minimum 0, vous pouvez l'ajouter à l'élément d'entrée (votre valeur sera réécrite par votre valeur maximale, etc.)
<input type="number" min="0" max="99"
onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">
Ensuite, si vous le souhaitez, vous pouvez vérifier si le nombre saisi est vraiment
Vous pouvez le spécifier en tant que texte, mais en ajoutant un péttern qui correspond uniquement aux chiffres:
<input type="text" pattern="\d*" maxlength="2">
Cela fonctionne parfaitement et aussi sur mobile (testé sur iOS 8 et Android) apparaît le clavier numérique.
//For Angular I have attached following snippet.<div ng-app="">
<form>
Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
</form>
<h1>You entered: {{number}}</h1>
</div>Si vous utilisez l'événement "onkeypress", vous n'obtiendrez aucune limitation de l'utilisateur lors de son développement (testez-le à l'unité). Et si vous avez des exigences n'autorisant pas l'utilisateur à entrer après une limite particulière, jetez un oeil à ce code et essayez une fois.
Comme indiqué par d’autres, min/max n’est pas la même chose que maxlength car les personnes peuvent toujours entrer un float plus grand que la longueur de chaîne maximale souhaitée. Pour véritablement émuler l'attribut maxlength, vous pouvez faire quelque chose comme ceci en une pincée (cela équivaut à maxlength = "16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
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. Veuillez consulter le code ci-dessous pour une implémentation simple.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
La réponse de Maycow Moura était un bon début… .. Cependant, sa solution signifie que lorsque vous entrez le deuxième chiffre, toute édition du champ s'arrête. Donc, vous ne pouvez pas modifier les valeurs ou supprimer des caractères.
Le code suivant s’arrête à 2, mais permet de continuer l’édition;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
Une autre option consiste simplement à ajouter un écouteur pour tout élément ayant l'attribut maxlength et à y ajouter la valeur de la tranche. En supposant que l'utilisateur ne souhaite pas utiliser une fonction dans chaque événement lié à l'entrée. Voici un extrait de code. Ignorer le code CSS et HTML, c'est le JavaScript qui compte.
// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
var t = event.target;
if (t.hasAttribute('maxlength')) {
t.value = t.value.slice(0, t.getAttribute('maxlength'));
}
}
// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>
<br>
<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>J'ai eu ce problème avant et je l'ai résolu en utilisant une combinaison de type de numéro html5 et jQuery.
<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>
scénario:
$("input[name='minutes']").on('keyup keypress blur change', function(e) {
//return false if not 0-9
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}else{
//limit length but allow backspace so that you can still delete the numbers.
if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
return false;
}
}
});
Je ne sais pas si les événements sont un peu excessifs mais cela a résolu mon problème . JSfiddle
Vous pouvez aussi essayer ceci pour une entrée numérique avec restriction de longueur
<input type="tel" maxlength="3" />
un moyen simple de définir maxlength pour les entrées numériques est:
<input type="number" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
Comme avec type="number", vous spécifiez une propriété max au lieu de maxlength, qui correspond au nombre maximal possible. Donc, avec 4 chiffres, max devrait être 9999, 5 chiffres 99999 et ainsi de suite.
De plus, si vous voulez vous assurer qu'il s'agit d'un nombre positif, vous pouvez définir min="0", en garantissant des nombres positifs.
Entrée HTML
<input class="minutesInput" type="number" min="10" max="120" value="" />
jQuery
$(".minutesInput").on('keyup keypress blur change', function(e) {
if($(this).val() > 120){
$(this).val('120');
return false;
}
});
Comme je l'ai découvert, vous ne pouvez utiliser aucun des événements onkeydown, onkeypress ou onkeyup pour une solution complète, y compris des navigateurs mobiles. Au fait, onkeypress est obsolète et n'est plus présent dans chrome/opera pour Android (voir: Evénements d'interface utilisateur Projet de travail du W3C, 4 août 2016 ).
J'ai imaginé une solution utilisant uniquement l'événement oninput . Il se peut que vous deviez procéder à une vérification supplémentaire du nombre, par exemple un signe négatif/positif ou un séparateur décimal et mille, etc., mais, au départ, cela devrait suffire:
function checkMaxLength(event) {
// Prepare to restore the previous value.
if (this.oldValue === undefined) {
this.oldValue = this.defaultValue;
}
if (this.value.length > this.maxLength) {
// Set back to the previous value.
this.value = oldVal;
}
else {
// Store the previous value.
this.oldValue = this.value;
// Make additional checks for +/- or ./, etc.
// Also consider to combine 'maxlength'
// with 'min' and 'max' to prevent wrong submits.
}
}Je recommanderais également de combiner maxlength avec min et max pour éviter les soumissions erronées comme indiqué ci-dessus à plusieurs reprises.
Pouah. C'est comme si quelqu'un avait abandonné la moitié de sa mise en œuvre et pensait que personne ne s'en rendrait compte.
Pour une raison quelconque, les réponses ci-dessus n'utilisent pas les attributs min et max. Ce jQuery le termine:
$('input[type="number"]').on('input change keyup paste', function () {
if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value));
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value));
});
Cela fonctionnerait probablement aussi comme une fonction nommée "oninput" sans jQuery si l’un de ces types "jQuery est le diable".
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();
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />
ou si vous voulez pouvoir entrer rien
<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />
Écrivez simplement ceci ...
<input type="text" onkeypress="return event.target.value.length < 13" placeholder="Enter Identity card number" class="form-control">
Pour qui cherche une limitation globale comme moi:
$(document).on('keypress','input[type="number"][maxlength]', function(){
return this.value.length < +this.attributes.maxlength.value;
});
Ceci intercepte chaque pression de touche sur le document et le filtre si l'entrée est un "nombre" et possède un attribut maxlength. Ensuite, permet d’appuyer sur la touche lorsque la longueur n’atteint pas la longueur maximale. Il fonctionne également avec des entrées et des modaux ajoutés dynamiquement, etc.
Les attributs les plus pertinents à utiliser seraient min et max.