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

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

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:

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

^{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); 
    }
}

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

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

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

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.

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

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

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

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

  });

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

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

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.

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

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

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

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

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

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