Come posso limitare possibili input in un elemento "numero" HTML5?

Per <input type="number">elemento, maxlengthnon funziona. Come posso limitare l' maxlengthelemento per quel numero?

E puoi aggiungere un maxattributo che specificherà il numero più alto possibile che puoi inserire

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

se aggiungi sia un valore che maxun minvalore, puoi specificare l'intervallo di valori consentiti:

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

Quanto sopra non impedirà comunque all'utente di immettere manualmente un valore al di fuori dell'intervallo specificato. Invece verrà visualizzato un popup che gli dice di inserire un valore all'interno di questo intervallo dopo aver inviato il modulo come mostrato in questo screenshot:

È possibile specificare gli attributi mine max, che consentiranno l'input solo all'interno di un intervallo specifico.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

Questo funziona solo per i pulsanti di controllo della trottola, tuttavia. Sebbene l'utente possa essere in grado di digitare un numero maggiore di quello consentito max, il modulo non verrà inviato.

^{Schermata tratta da Chrome 15}

È possibile utilizzare l' oninputevento HTML5 in JavaScript per limitare il numero di caratteri:

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

Se stai cercando una soluzione Web mobile in cui desideri che il tuo utente visualizzi un tastierino numerico anziché una tastiera full text. Usa type = "tel". Funzionerà con maxlength che ti evita di creare javascript extra.

Max e Min consentiranno comunque all'utente di digitare numeri in eccesso di max e min, il che non è ottimale.

Puoi combinare tutti questi in questo modo:

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

Aggiornamento:
potresti anche voler impedire l'inserimento di caratteri non numerici, perché object.lengthsarebbe una stringa vuota per gli input numerici e quindi la sua lunghezza sarebbe 0. Pertanto la maxLengthCheckfunzione non funzionerà.

Soluzione:
vedere questo o questo per esempi.

Demo - Guarda la versione completa del codice qui:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Aggiornamento 2: ecco il codice di aggiornamento: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Aggiornamento 3: Si noti che consentire l'immissione di più di un punto decimale può incasinare il valore numerico.

è molto semplice, con alcuni javascript puoi simulare un maxlength, dai un'occhiata:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

Oppure se il tuo valore massimo è ad esempio 99 e minimo 0, puoi aggiungerlo all'elemento di input (il tuo valore verrà riscritto dal tuo valore massimo ecc.)

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

Quindi (se lo desideri), puoi verificare se è stato inserito il numero reale

Puoi specificarlo come testo, ma aggiungi pettern, che corrisponde solo ai numeri:

<input type="text" pattern="\d*" maxlength="2">

Funziona perfettamente e anche su dispositivi mobili (testato su iOS 8 e Android) fa apparire la tastiera numerica.

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

Se si utilizza l'evento "onkeypress", non si otterrà alcuna limitazione dell'utente in quanto tale durante lo sviluppo (test unità). E se hai dei requisiti che non consentono all'utente di entrare dopo un limite particolare, dai un'occhiata a questo codice e prova una volta.

Un'altra opzione è semplicemente aggiungere un listener per qualsiasi cosa con l'attributo maxlength e aggiungere il valore slice a quello. Supponendo che l'utente non desideri utilizzare una funzione all'interno di ogni evento correlato all'input. Ecco uno snippet di codice. Ignora il codice CSS e HTML, JavaScript è ciò che conta.

// 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 lunghezza massima non funzionerà <input type="number"nel modo migliore che conosco sia utilizzare l' oninputevento per limitare la lunghezza massima. Si prega di consultare il codice seguente per una semplice implementazione.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

Supponiamo che tu abbia voluto che il valore massimo consentito fosse 1000 - digitato o con lo spinner.

È possibile limitare i valori del filatore utilizzando: type="number" min="0" max="1000"

e limitare ciò che viene digitato dalla tastiera 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; }">

Come affermato da altri, min / max non è uguale a maxlength perché le persone potrebbero comunque entrare in un float che sarebbe più grande della lunghezza massima della stringa desiderata. Per emulare veramente l'attributo maxlength, puoi fare qualcosa del genere in un pizzico (questo equivale a maxlength = "16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

La risposta di Maycow Moura è stata un buon inizio. Tuttavia, la sua soluzione significa che quando si inserisce la seconda cifra, tutte le modifiche al campo si interrompono. Quindi non è possibile modificare i valori o eliminare alcun carattere.

Il codice seguente si ferma su 2, ma consente di continuare la modifica;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

Ho avuto questo problema prima e l'ho risolto usando una combinazione di tipo di numero html5 e jQuery.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

script:

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

Non so se gli eventi siano un po 'eccessivi, ma ha risolto il mio problema. JSfiddle

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

  });

un modo semplice per impostare la massima lunghezza per gli input numerici è:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

Come per type="number", si specifica un maxinvece di maxlengthproprietà, che è il numero massimo possibile. Quindi, con 4 cifre, maxdovrebbe essere 9999, 5 cifre 99999e così via.

Inoltre, se si desidera assicurarsi che sia un numero positivo, è possibile impostare min="0", garantendo numeri positivi.

Ugh. È come se qualcuno avesse rinunciato a metà dell'implementazione e pensasse che nessuno se ne sarebbe accorto.

Per qualsiasi motivo, le risposte sopra non usano gli attributi mine max. Questo jQuery lo completa:

    $('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);
    });

Probabilmente funzionerebbe anche come una funzione denominata "oninput" senza jQuery se il tuo uno di quei tipi "jQuery-is-the-diavolo".

Come ho scoperto non è possibile utilizzare qualsiasi onkeydown, onkeypresso di onkeyupeventi per una soluzione completa che include browser mobili. A proposito onkeypressè deprecato e non è più presente in Chrome / Opera per Android (vedi: UI Events W3C Working Draft, 04 agosto 2016 ).

Ho trovato una soluzione usando oninputsolo l' evento. Potrebbe essere necessario eseguire un ulteriore controllo numerico come richiesto come segno negativo / positivo o decimale e migliaia di separatori e simili, ma come inizio dovrebbe essere sufficiente quanto segue:

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

Io consiglio anche di combinare maxlengthcon mine maxper evitare che sottomette sbagliate come si è detto più volte.

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

o se vuoi essere in grado di inserire nulla

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

Puoi provare anche questo per input numerici con limitazione di lunghezza

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

So che c'è già una risposta, ma se vuoi che il tuo input si comporti esattamente come l' maxlengthattributo o il più vicino possibile, usa il seguente codice:

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

Attributi più pertinenti da utilizzare sarebbero mine max.

Questo potrebbe aiutare qualcuno.

Con un po 'di javascript puoi cercare tutti gli input datetime-local, cercare se l'anno che l'utente sta cercando di inserire, più di 100 anni in 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);
      }
    })
  });