Как я могу ограничить возможные входные данные в элементе HTML5 «число»?

Question

Для элемента <input type="number">, maxlength не работает. Как я могу ограничить maxlength для этого числового элемента?

Answer 1

Как утверждают другие, min / max - это не то же самое, что maxlength, потому что люди все равно могут войти в число с плавающей точкой, которое будет больше максимальной длины строки, которую вы намеревались. Чтобы действительно эмулировать атрибут maxlength, вы можете сделать что-то вроде этого в крайнем случае (это эквивалентно maxlength = "16"):

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

Answer 2

Другой вариант - просто добавить прослушиватель для чего-либо с атрибутом maxlength и добавить к нему значение среза. Предполагая, что пользователь не хочет использовать функцию внутри каждого события, связанного с вводом. Вот фрагмент кода. Не обращайте внимания на код CSS и HTML, важен JavaScript.

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

Answer 3

У меня была эта проблема раньше, и я решил ее, используя комбинацию числового типа html5 и jQuery.

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

Сценарий:

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

Я не знаю, являются ли события немного излишними, но это решило мою проблему. JSfiddle

Answer 4

простой способ установить максимальную длину для числовых входов:

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

Answer 5

Как и в случае type="number", вы задаете свойство max вместо maxlength, которое является максимально возможным числом.Таким образом, с 4 цифрами max должно быть 9999, 5 цифрами 99999 и т. Д.

Также, если вы хотите убедиться, что это положительное число, вы можете установить min="0", гарантируя, чтоположительные числа.

Answer 6

Вы можете попробовать это также для числового ввода с ограничением длины

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

Answer 7

Ввод 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;
    }

  });

Answer 8

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

или если вы хотите иметь возможность ничего не вводить

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

Answer 9

Тьфу.Как будто кто-то сдался на полпути, реализовав это, и подумал, что никто не заметит.

По какой-то причине в приведенных выше ответах не используются атрибуты min и max.Этот jQuery завершает его:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value));
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value));
    });

Вероятно, он также будет работать как именованная функция "oninput" без jQuery, если вы используете один из этих типов "jQuery-is-the-devil".

Answer 10

Как я выяснил, вы не можете использовать любое из событий onkeydown, onkeypress или onkeyup для полного решения, включая мобильные браузеры.Кстати, onkeypress устарела и больше не присутствует в Chrome / Opera для Android (см .: События пользовательского интерфейса W3C Working Draft, 04 августа 2016 ).

Я нашел решение, используя только событие oninput.Возможно, вам придется выполнить дополнительную проверку числа, если это необходимо, например, знак минус / положительный знак или разделитель десятичных знаков и тысяч и т. П., Но для начала должно быть достаточно следующего:

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

Я бы также порекомендовал объединить maxlength с min и max, чтобы предотвратить неправильные отправки, как указано выше несколько раз.