¿Cómo puedo limitar posibles entradas en un elemento de "número" HTML5?


359

Por <input type="number">elemento, maxlengthno funciona. ¿Cómo puedo restringir el maxlengthelemento de ese número?


55
Para las personas que buscan una mejor solución, esta es la mejor: stackoverflow.com/questions/9361193/…
Ünsal Korkmaz

44
El atributo max no funciona en el navegador Chrome en la tableta Android.
Foreever

44
@ ÜnsalKorkmaz: esa solución tiene la desventaja de que no muestra el teclado numérico en los dispositivos Android
será

Respuestas:


340

Y puede agregar un maxatributo que especificará el número más alto posible que puede insertar

<input type="number" max="999" />

si agrega tanto a maxcomo un minvalor, 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:

enter image description here


44
Krister, esto funcionó. También como @Andy dijo que he usado la entrada para cortar los números adicionales. Referencia mathiasbynens.be/notes/oninput
Prasad

77
@Prasad: si la respuesta de Andy es correcta, selecciónela en lugar de la más votada.
Moshe

81
Esto es correcto, pero debe tenerse en cuenta que Andy afirma que esto no restringe a uno de escribir un número más largo. Por lo tanto, no es realmente el equivalente de maxlength en un campo de texto.
DA.

99
Si simplemente ingresó un flotador de mayor precisión, esto se romperá. Por ejemplo, 3.1415926 evita esto porque es menor que 999 y mayor que 1.
0112

44
¡No sé por qué esto es tan votado y aceptado cuando simplemente no funciona! Solo afecta a los controles "spinner" y no hace nada para evitar que el usuario escriba un número largo.
Codemonkey

115

Puede especificar los atributos miny 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á.

Mensaje de validación de Chrome para números mayores que el máximo
Captura de pantalla tomada de Chrome 15

Usted puede utilizar el HTML5 oninputevento en JavaScript para limitar el número de caracteres:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

11
Un posible problema con ese enfoque de JavaScript: puede que no funcione como se esperaba si el punto de inserción no está al final del valor. Por ejemplo, si ingresa el valor "1234" en el campo de entrada, luego mueve el punto de inserción al principio del valor y escribe "5", termina con el valor "5123". Esto es diferente a un campo input type = "text" con una longitud máxima de 4, donde el navegador no le permite escribir un quinto carácter en el campo "full", y el valor permanecería "1234".
Jon Schneider

@Andy, obviamente la pregunta está buscando una forma de hacer que no sea JS maxlength.............
Pacerier

44
@Pacerier: ¿algo en mi respuesta implica que pensé lo contrario? Como puede ver, ofrecí la solución más cercana posible que se puede lograr usando solo HTML, junto con una sugerencia adicional que usa JavaScript donde el OP podría haber querido evitar que el usuario escriba más caracteres de los permitidos.
Andy E

84

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.


3
Gran descubrimiento, esto funcionó de maravilla, aprobado por no tener que crear el javascript adicional.
Diego

99
Descubrí que esta no es la mejor solución para la entrada numérica porque una entrada "tel" permite símbolos adicionales y muestra letras al lado de cada número. El teclado puramente numérico se ve mucho más limpio.
hawkharris

@hawkharris Tienes razón, type = "number" es la interfaz de usuario más limpia. Es más fácil escribir accidentalmente un carácter incorrecto. Por lo tanto, se necesita una validación adicional para garantizar que el usuario no ingrese datos incorrectos. Pero también considere que el usuario podría ingresar fácilmente todos los puntos decimales con un teclado numérico. Además, no resuelve la pregunta anterior sin JavaScript adicional.
Duane

1
Gracias, estoy trabajando en la aplicación móvil de marco iónico y esto resolvió mi problema
Ahmed

1
si se usa con pattern = "[0-9] *", los símbolos adicionales se deshabilitarán
apereira

71

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.lengthque sería una cadena vacía para las entradas numéricas y, por lo tanto, su longitud sería 0. Por lo tanto, la maxLengthCheckfunció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.


Esta es una buena solución, pero creo que object.value.length devuelve 0 si hay valores no numéricos ingresados.
Andrew

1
@AndrewSpear Eso se debe a que object.value sería una cadena vacía si ingresa valores no numéricos en las entradas con un tipo de conjunto de 'números'. Ver la documentación. Además, lea mi actualización para solucionar este problema.
David Refoua

Esto aún se rompe si ingresa más de un punto decimal, como 111..1111. No use este código por seguridad, ya que aún puede pasar código malicioso.
PieBie

@PieBie Dude, este código es para hace más de 3 años. Use jQuery en su lugar.
David Refoua

1
Sí, lo sé, pero los principiantes podrían copiarlo y pegarlo.
PieBie

26

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;" />

12
Con su solución, no puede usar la tecla de retroceso una vez que alcanza los 2 caracteres. pero extraño algo para una solución funcional
Christophe Debove

12
En lugar de onKeyDown, debe usar onKeyPress.
Rupesh Arora

1
no funcionará si resalta el texto y presiona un carácter (es decir, para reemplazar el contenido de la entrada)
Arijoon

validar esto si no es de las siguientes claves stackoverflow.com/a/2353562/1534925
Akshay

3
El problema keydownes que no puede usar la tecla de retroceso en caracteres máximos. El problema keypresses que puede copiar y pegar más allá de los caracteres máximos.
Stavm

23

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


... Genial, pero ya no necesitas mínimo y máximo amigo. (solo diciendo)
xoxel

2
@xoxel lo hace si desea que el mensaje de advertencia siga
apareciendo

Esto es realmente bueno ... Gracias
Vincy Oommen

en aras de la generalización que haríaonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
oriadam

18

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.


El atributo de patrón no es compatible con IE9 y versiones anteriores, y tiene soporte parcial en Safari: caniuse.com/#feat=input-pattern
diazdeteran

Sí, gracias por señalar, pero abandonamos el soporte de IE9 (cortando la mostaza), y lo prefiero a los métodos JS. Depende del proyecto.
Chris Panayotoff

2
No se impide que un usuario ingrese caracteres no numéricos con esto. Pueden ingresar 2 de cualquier personaje. La patternúnica causa el resaltado de validación.
brt

probado en Android 9 (Nokia 8) pero obtengo el teclado normal :( ¿alguna idea?
oriadam

14

//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.


1
Los problemas que veo aquí son: 1. reemplazar con seleccionar el texto y el tipo no funciona si la entrada ha alcanzado 7 números 2. aumentar la entrada en 1 cuando el desbordamiento "boarder" golpea funciona -> 9999999 y hacer clic arriba botón. Rompe la limitación
Edub

Intenté con la versión simple javascript. Si lo desea, puede ver usando Ejecutar fragmento de código. Como tal, no encontré ninguna limitación.
Prasad Shinde

1
Tampoco encontré ninguna limitación. Se detiene en 7 dígitos. Estoy usando esta solución para mi código.
Claudio

Hay una limitación. Cuando llegue al límite, seleccione todos y desee reemplazarlos, no funciona. El reemplazo funciona para mí solo cuando sobrescribo el valor con la curva antes de devolver falso.
Insomnia88

@ Insomnia88, @ edub ¿y si escribimos la función y verificamos las condiciones necesarias ...
Prasad Shinde

12

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>


10

La longitud máxima no funcionará de <input type="number"la mejor manera que sé, es usar el oninputevento 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"
 />

¡Trabajado como un encanto!
SiboVG

9

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; }">

8

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)">

slice eliminará caracteres sin conocimiento del usuario final cuando se inserte en el medio. mientras que max-length se bloqueará.
Pradeep Kumar Prabaharan

@PradeepKumarPrabaharan maxlengthno 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.
thdoan

sí maxlength no es compatible con entradas de números ... este código es gud pero este código no coincide exactamente con la propiedad de maxlength ..
Pradeep Kumar Prabaharan

@TobiasGaertner type="number"se encarga de eso :).
thdoan

@ 10basetom ... dependiendo del navegador ... por ejemplo, en FF aún puede ingresar caracteres y no se detendrán después del límite, pero en relación con la idea del número de tipo, esta es una solución aceptable.
Tobias Gaertner

6

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);"

2
No Intenta pegar un valor.
Qwertiy

6

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


Puedes pegar fácilmente personajes.
Jessica

4

Entrada 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;
    }

  });

4

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); }" />

no funciona en Android Chrome. onkeypress tiene algunos problemas con esto.
Aakash Thakur

3

Al igual que con type="number", especifica una propiedad en maxlugar de una maxlength, que es el número máximo posible. Entonces, con 4 dígitos, maxdebe ser 9999, 5 dígitos 99999y así sucesivamente.

Además, si desea asegurarse de que sea un número positivo, puede establecerlo min="0", asegurando números positivos.


3

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 miny 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".


no responde correctamente la pregunta, pero votó porque resolvió mi problema :)
TrOnNe

2

Como puede observar, no se puede utilizar cualquiera de onkeydown, onkeypresso onkeyupeventos de una solución completa, incluyendo los navegadores móviles. Por cierto, onkeypressestá 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 oninputsolo 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 maxlengthcon miny maxpara evitar que somete equivocadas como se ha dicho varias veces.


2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

o si no quieres poder ingresar nada

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

1

También puede probar esto para la entrada numérica con restricción de longitud

<input type="tel" maxlength="3" />

@tiltdown Sry para mistype. Corrigió la respuesta.
shinobi

1

Sé que ya hay una respuesta, pero si desea que su entrada se comporte exactamente como el maxlengthatributo 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();

@Phill_t tal vez me puedas iluminar? Usé su código y está funcionando bien en el principal PERO "$ (this) .attr (" maxlength ")" siempre entrega 2. Y por qué sería mejor usar "$ (this) .attr (" maxlength ")" si estaba funcionando en lugar de solo "this.maxlength" que probé y estaba funcionando como se esperaba y es más corto y también más claro de leer? ¿Yo me perdí algo?
Markus s

¿Qué quieres decir con "entrega 2"?
Philll_t

Phill_t mis disculpas. "this.maxLength" solo funciona en el ámbito de la función keydown. En la función "addMax", "este" es el documento en lugar del elemento esperado y, por lo tanto, tiene valores de atributo diferentes. ¿Cómo obtendría acceso a la entrada del número? ¿El código anterior realmente funciona de tu lado? Probé con Chrome / Opera / Vivaldi, Firefox, Edge, IE y Safari y obtuve los mismos resultados para cada navegador. Bien, en Edge maxlegth = "1" y maxlength = "2" donde realmente funciona pero "$ (this) .attr (" maxlength ")" no aumentan más para un número mayor !! @anybody: ¿Alguna sugerencia?
Markus s

Como dije, siempre son dos porque aparece en el documento y no en el elemento en cuestión, como descubrí cuando lo estaba depurando. Por cierto, es posible que también desee ver mi solución, que descubrí después de estudiar la suya: stackoverflow.com/a/41871960/1312012
markus s

0

Los atributos más relevantes para usar serían miny max.


0

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);
      }
    })
  });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.