Pour l' <input type="number">
élément, maxlength
ne fonctionne pas. Comment puis-je restreindre le maxlength
pour cet élément numérique?
Pour l' <input type="number">
élément, maxlength
ne fonctionne pas. Comment puis-je restreindre le maxlength
pour cet élément numérique?
Réponses:
Et vous pouvez ajouter un max
attribut qui spécifiera le plus grand nombre possible que vous pourrez insérer
<input type="number" max="999" />
si vous ajoutez à la fois une max
et une min
valeur, vous pouvez spécifier la plage de valeurs autorisées:
<input type="number" min="1" max="999" />
Ce qui précède n'empêchera toujours pas 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 disant d'entrer 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 la saisie uniquement dans une plage spécifique.
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
Cependant, cela ne fonctionne que pour les boutons de commande du spinner. Bien que l'utilisateur puisse être en mesure de taper un nombre supérieur à celui autorisé max
, le formulaire ne sera pas soumis.
Capture d'écran tirée de Chrome 15
Vous pouvez utiliser l' oninput
événement HTML5 en JavaScript pour limiter le nombre de caractères:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
Si vous recherchez un Web mobile solution dans laquelle vous souhaitez que votre utilisateur voit un pavé numérique plutôt qu'un clavier de texte intégral. Utilisez type = "tel". Cela fonctionnera avec maxlength qui vous évite de créer du javascript supplémentaire.
Max et Min permettront toujours à l'utilisateur de taper des nombres supérieurs à max et min, ce qui n'est pas optimal.
Vous pouvez combiner tout cela 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>
Mise à jour:
vous souhaiterez peut-être également empêcher la saisie de caractères non numériques, car ce object.length
serait une chaîne vide pour les entrées numériques, et donc sa longueur serait 0
. Ainsi, la maxLengthCheck
fonction ne fonctionnera pas.
Solution:
voir ceci ou cela 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 permettre à plus d'un point décimal d'être entré peut perturber la valeur numérique.
c'est très simple, avec du javascript, vous pouvez simuler un maxlength
, vérifiez-le:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
est que vous ne pouvez pas utiliser le retour arrière au maximum de caractères. le problème keypress
est que vous pouvez copier + coller au-delà du nombre maximum de caractères.
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 voulez), vous pouvez vérifier si l'entrée est vraiment un nombre
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Vous pouvez le spécifier sous forme de texte, mais ajouter un motif, qui ne correspond qu'aux nombres:
<input type="text" pattern="\d*" maxlength="2">
Il fonctionne parfaitement et également sur mobile (testé sur iOS 8 et Android) sort le clavier numérique.
pattern
seule cause la mise en évidence de la validation.
//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'aurez aucune limitation utilisateur en tant que telle lors du développement (testez-le à l'unité). Et si vous avez des exigences qui ne permettent pas à l'utilisateur d'entrer après une limite particulière, jetez un œil à ce code et essayez une fois.
Une autre option consiste simplement à ajouter un écouteur pour tout ce qui a l'attribut maxlength et à y ajouter la valeur de tranche. En supposant que l'utilisateur ne souhaite pas utiliser de fonction dans chaque événement lié à l'entrée. Voici un extrait de code. Ignorez le code CSS et HTML, le JavaScript est ce 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>
La longueur maximale ne fonctionnera pas avec <input type="number"
la meilleure façon que je sache est d'utiliser l' oninput
événement 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"
/>
Supposons que vous vouliez que la valeur maximale autorisée soit de 1 000 - soit tapée soit avec la double flèche.
Vous limitez les valeurs de spinner en utilisant:
type="number" min="0" max="1000"
et restreindre ce qui est tapé par le clavier avec javascript:
onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }
"
<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
Comme indiqué par d'autres, min / max n'est pas la même chose que maxlength car les gens peuvent toujours entrer un flottant qui serait plus grand que la longueur de chaîne maximale que vous vouliez. Pour vraiment émuler l'attribut maxlength, vous pouvez faire quelque chose comme ça dans un pincement (cela équivaut à maxlength = "16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
n'est pas pris en charge par les entrées de nombre. Dans mon exemple, value.slice(0,16)
ne démarre que si la valeur d'entrée dépasse 16 caractères.
type="number"
s'en charge :).
La réponse de Maycow Moura était un bon début. Cependant, sa solution signifie que lorsque vous entrez le deuxième chiffre, toute modification du champ s'arrête. Vous ne pouvez donc pas modifier les valeurs ni supprimer aucun caractère.
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);"
J'ai eu ce problème avant et je l'ai résolu en utilisant une combinaison de type de numéro html5 et de 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 exagérés mais cela a résolu mon problème. JSfiddle
un moyen simple de définir la longueur maximale pour les entrées numériques est:
<input type="number" onkeypress="return this.value.length < 4;" 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 est le nombre maximum possible. Donc, avec 4 chiffres, max
devrait être 9999
, 5 chiffres99999
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"
un nombre positif.
Pouah. C'est comme si quelqu'un avait abandonné à mi-chemin de sa mise en œuvre et pensait que personne ne le remarquerait.
Pour une raison quelconque, les réponses ci-dessus n'utilisent pas les attributs min
et max
. Cette 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) || 0);
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});
Il fonctionnerait probablement aussi comme une fonction nommée "oninput" sans jQuery si l'un de ces types "jQuery-is-the-devil".
Comme je l' ai appris que vous ne pouvez pas utiliser l' une onkeydown
, onkeypress
ou des onkeyup
événements pour une solution complète incluant les navigateurs mobiles. Au fait, il onkeypress
est obsolète et n'est plus présent dans Chrome / Opera pour Android (voir: UI Events W3C Working Draft, 04 août 2016 ).
J'ai trouvé une solution en utilisant l' oninput
événement uniquement. Vous devrez peut-être effectuer une vérification supplémentaire des nombres, comme un signe négatif / positif ou des séparateurs décimaux et mille, etc., mais pour commencer, les éléments suivants devraient 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
avecmin
et max
d'éviter les mauvaises soumissions comme indiqué ci-dessus à plusieurs reprises.
Je sais qu'il y a déjà une réponse, mais si vous voulez que votre entrée se comporte exactement comme l' maxlength
attribut ou aussi près 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();
Cela pourrait aider quelqu'un.
Avec un peu de javascript, vous pouvez rechercher toutes les entrées locales datetime, rechercher si l'année que l'utilisateur essaie d'entrer, plus de 100 ans à l'avenir:
$('input[type=datetime-local]').each(function( index ) {
$(this).change(function() {
var today = new Date();
var date = new Date(this.value);
var yearFuture = new Date();
yearFuture.setFullYear(yearFuture.getFullYear()+100);
if(date.getFullYear() > yearFuture.getFullYear()) {
this.value = today.getFullYear() + this.value.slice(4);
}
})
});