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

Question

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

Answer 1

И вы можете добавить атрибут max, который будет указывать максимально возможное число, которое вы можете вставить

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

, если вы добавите как max, так и min значение, вы можете указатьдиапазон допустимых значений:

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

Вышеуказанное все равно не не позволит пользователю вручную ввести значение вне указанного диапазона.Вместо этого он будет отображаться всплывающее окно, сообщающее ему, чтобы ввести значение в этом диапазоне после отправки формы, как показано на этом скриншоте:

Answer 2

Вы можете указать атрибуты min и max, которые позволят вводить только в пределах определенного диапазона.

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

Однако это работает только для кнопок управления счетчиком. Хотя пользователь может набрать число больше допустимого max, форма не будет отправлена.

^{Снимок экрана, сделанный из Chrome 15}

Вы можете использовать событие HTML5 oninput в JavaScript, чтобы ограничить количество символов:

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

Answer 3

Если вы ищете решение Mobile Web , в котором вы хотите, чтобы ваш пользователь видел цифровую клавиатуру, а не полнотекстовую клавиатуру. Используйте type = "tel". Он будет работать с максимальной длиной, которая избавит вас от создания дополнительного JavaScript.

Макс. И Мин. Все еще позволяют пользователю вводить числа, превышающие макс. И мин., Что не является оптимальным.

Answer 4

Вы можете комбинировать все это следующим образом:

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

Обновление:
Вы также можете запретить ввод любых нецифровых символов,потому что object.length будет пустой строкой для числовых входов, и, следовательно, ее длина будет 0.Таким образом, функция maxLengthCheck не будет работать.

Решение:
См. this или this для примеров.

Демо - Полная версия кода приведена здесь:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Обновление 2: Вот код обновления: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Обновление 3: Обратите внимание, что разрешение ввода более десятичной точки может привести к путанице с числовым значением.

Answer 5

это очень просто, с некоторым javascript вы можете смоделировать maxlength, проверьте это:

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

Answer 6

Или, если ваше максимальное значение, например, 99 и минимум 0, вы можете добавить это к элементу ввода (ваше значение будет перезаписано вашим максимальным значением и т. Д.)

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

Затем (если вы хотите), вы можете проверить, действительно ли введен номер

Answer 7

Вы можете указать его как текст, но добавить петтерн, который соответствует только номерам:

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

Работает отлично, а также на мобильных устройствах (протестировано на iOS 8 и Android) выскакивает цифровая клавиатура.

Answer 8

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

Если вы используете событие «onkeypress», то при разработке вы не получите никаких пользовательских ограничений как таковых (юнит-тестирование). И если у вас есть требование, которое не позволяет пользователю вводить после определенного лимита, посмотрите этот код и попробуйте один раз.

Answer 9

Максимальная длина не будет работать с <input type="number" лучший способ, который я знаю, - это использовать oninput событие для ограничения максимальной длины.Пожалуйста, смотрите код ниже для простой реализации.

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

Answer 10

Maycow Ответ Моуры был хорошим началом.Однако его решение означает, что при вводе второй цифры все редактирование поля прекращается.Поэтому вы не можете изменять значения или удалять любые символы.

Следующий код останавливается на 2, но позволяет продолжить редактирование:

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