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

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

22 ответов


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

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

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

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

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

enter image description here


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

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

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

Chrome's validation message for numbers greater than the 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", вы не получите никаких ограничений пользователя при разработке ( модульный тест). И если у вас есть требование, которое не позволяет пользователю вводить после определенного предела, посмотрите этот код и попробуйте один раз.


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

следующий код останавливается на 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 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;
});

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