Por <input type="number">
elemento, maxlength
no funciona. ¿Cómo puedo restringir el maxlength
elemento de ese número?
Por <input type="number">
elemento, maxlength
no funciona. ¿Cómo puedo restringir el maxlength
elemento de ese número?
Respuestas:
Y puede agregar un max
atributo que especificará el número más alto posible que puede insertar
<input type="number" max="999" />
si agrega tanto a max
como un min
valor, puede especificar el rango de valores permitidos:
<input type="number" min="1" max="999" />
Lo anterior aún no impedirá que un usuario ingrese manualmente un valor fuera del rango especificado. En su lugar, se mostrará una ventana emergente que le indicará que ingrese un valor dentro de este rango al enviar el formulario como se muestra en esta captura de pantalla:
Puede especificar los atributos min
y max
, que permitirán la entrada solo dentro de un rango específico.
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
Sin embargo, esto solo funciona para los botones de control giratorio. Aunque el usuario puede escribir un número mayor que el permitido max
, el formulario no se enviará.
Captura de pantalla tomada de Chrome 15
Usted puede utilizar el HTML5 oninput
evento en JavaScript para limitar el número de caracteres:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
Si está buscando una solución web móvil en la que desea que su usuario vea un teclado numérico en lugar de un teclado de texto completo. Use type = "tel". Funcionará con maxlength, lo que le ahorrará la creación de javascript adicional.
Max y Min todavía permitirán al usuario escribir números que excedan max y min, lo que no es óptimo.
Puede combinar todos estos de esta manera:
<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>
Actualizar:
es posible que también desee evitar que se ingresen caracteres no numéricos, ya object.length
que sería una cadena vacía para las entradas numéricas y, por lo tanto, su longitud sería 0
. Por lo tanto, la maxLengthCheck
función no funcionará.
Solución:
ver esto o esto para ver ejemplos.
Manifestación : vea la versión completa del código aquí:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
Actualización 2: Aquí está el código de actualización: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
Actualización 3: Tenga en cuenta que permitir que se ingrese más de un punto decimal puede alterar el valor numérico.
es muy simple, con algunos javascript puedes simular maxlength
, échale un vistazo:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
es que no puede usar la tecla de retroceso en caracteres máximos. El problema keypress
es que puede copiar y pegar más allá de los caracteres máximos.
O si su valor máximo es, por ejemplo, 99 y mínimo 0, puede agregar esto al elemento de entrada (su valor será reescrito por su valor máximo, 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">
Luego (si lo desea), puede verificar si la entrada es realmente número
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Puede especificarlo como texto, pero agregar pettern, que solo coinciden con los números:
<input type="text" pattern="\d*" maxlength="2">
Funciona perfecto y también en dispositivos móviles (probado en iOS 8 y Android) destaca el teclado numérico.
pattern
única causa el resaltado de validación.
//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 utiliza el evento "onkeypress", no obtendrá ninguna limitación de usuario como tal durante el desarrollo (prueba de unidad). Y si tiene un requisito que no permite que el usuario ingrese después de un límite particular, eche un vistazo a este código e intente una vez.
Otra opción es simplemente agregar un oyente para cualquier cosa con el atributo maxlength y agregarle el valor de corte. Asumiendo que el usuario no quiere usar una función dentro de cada evento relacionado con la entrada. Aquí hay un fragmento de código. Ignora el código CSS y HTML, el JavaScript es lo que importa.
// 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 longitud máxima no funcionará de <input type="number"
la mejor manera que sé, es usar el oninput
evento para limitar la longitud máxima. Consulte el siguiente código para una implementación simple.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
Digamos que desea que el valor máximo permitido sea 1000, ya sea escrito o con la ruleta.
Restringe los valores de la ruleta usando:
type="number" min="0" max="1000"
y restringir lo que escribe el teclado con 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; }">
Como lo han dicho otros, min / max no es lo mismo que maxlength porque las personas aún podrían ingresar un flotante que sería más grande que la longitud máxima de cadena que usted pretendía. Para emular verdaderamente el atributo maxlength, puede hacer algo como esto en un apuro (esto es equivalente a maxlength = "16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
no es compatible con entradas numéricas. En mi ejemplo, value.slice(0,16)
no se activará a menos que el valor de entrada sea mayor a 16 caracteres.
type="number"
se encarga de eso :).
La respuesta de Maycow Moura fue un buen comienzo. Sin embargo, su solución significa que cuando ingresa el segundo dígito se detiene toda la edición del campo. Por lo tanto, no puede cambiar los valores ni eliminar ningún carácter.
El siguiente código se detiene en 2, pero permite que continúe la edición;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
Tuve este problema antes y lo resolví usando una combinación de tipo de número html5 y jQuery.
<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>
guión:
$("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;
}
}
});
No sé si los eventos son un poco exagerados, pero resolvió mi problema. JSfiddle
Una forma sencilla de establecer la longitud máxima para las entradas numéricas es:
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
Al igual que con type="number"
, especifica una propiedad en max
lugar de una maxlength
, que es el número máximo posible. Entonces, con 4 dígitos, max
debe ser 9999
, 5 dígitos 99999
y así sucesivamente.
Además, si desea asegurarse de que sea un número positivo, puede establecerlo min="0"
, asegurando números positivos.
Ugh Es como si alguien renunciara a la mitad de la implementación y pensó que nadie se daría cuenta.
Por alguna razón, las respuestas anteriores no usan los atributos min
y max
. Este jQuery lo termina:
$('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);
});
Probablemente también funcionaría como una función con nombre "entrada" sin jQuery si es uno de esos tipos de "jQuery-is-the-devil".
Como puede observar, no se puede utilizar cualquiera de onkeydown
, onkeypress
o onkeyup
eventos de una solución completa, incluyendo los navegadores móviles. Por cierto, onkeypress
está en desuso y ya no está presente en Chrome / Opera para Android (ver: UI Events W3C Working Draft, 04 de agosto de 2016 ).
Descubrí una solución usando oninput
solo el evento. Es posible que tenga que hacer una verificación de número adicional según sea necesario, como un signo negativo / positivo o separadores decimales y de miles y similares, pero como comienzo, lo siguiente debería ser suficiente:
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.
}
}
También recomendaría combinar maxlength
con min
y max
para evitar que somete equivocadas como se ha dicho varias veces.
Sé que ya hay una respuesta, pero si desea que su entrada se comporte exactamente como el maxlength
atributo o lo más cerca posible, use el siguiente código:
(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();
Esto podría ayudar a alguien.
Con un poco de javascript, puede buscar todas las entradas locales de fecha y hora, buscar si el año que el usuario intenta ingresar, más de 100 años en el futuro:
$('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);
}
})
});