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

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

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

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

^{Скриншот взят из Chrome 15}

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

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

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

Max и Min по-прежнему позволяют пользователю вводить числа, превышающие max и min, что не является оптимальным.

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

<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 функция не будет работать.

устранение:
посмотреть этой или этой для примера.

демо - Смотрите полную версию кода здесь:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

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

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

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

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

или если ваше максимальное значение, например, 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">

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

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

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

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

//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", то вы не получите никаких ограничений пользователя как таковых при разработке ( unit test it). И если у вас есть требование, которое не позволяет пользователю вводить после определенного предела, посмотрите этот код и попробуйте один раз.

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

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

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

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

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

у меня была эта проблема раньше, и я решил ее, используя комбинацию типа номера 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

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

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

другой вариант-просто добавить прослушиватель для чего-либо с атрибутом 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>

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

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

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

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

HTML Input

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

  });

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

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

Я знаю, что уже есть ответ, но если вы хотите, чтобы ваш вход вел себя точно так же, как

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

Я придумал решение с помощью

более релевантные атрибуты для использования будут min и max.

тьфу. Это похоже на то, что кто-то сдался на полпути к его реализации и думал, что никто не заметит.

по какой-то причине, ответы выше не используют 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-это дьявол".

для тех, кто ищет глобальное ограничение, как я:

$(document).on('keypress','input[type="number"][maxlength]', function(){
    return this.value.length < +this.attributes.maxlength.value;
});

это ловит каждое нажатие клавиши на документе и фильтрует его, если вход является" числовым " входом и имеет