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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы ищете мобильный веб решение в котором вы хотите, чтобы ваш пользователь видел цифровую клавиатуру, а не полнотекстовую клавиатуру. Используйте type = "tel". Он будет работать с максимальной длиной, которая избавит вас от создания дополнительного 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», то при разработке вы не получите никаких пользовательских ограничений (тестируйте его). И если у вас есть требование, которое не позволяет пользователю вводить после определенного лимита, посмотрите этот код и попробуйте один раз.

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

Максимальная длина не будет работать с <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"
 />

Допустим, вы хотели, чтобы максимально допустимое значение было 1000 - либо набрано, либо с помощью счетчика.

Вы ограничиваете значения счетчика, используя: type="number" min="0" max="1000"

и ограничьте то, что набрано на клавиатуре, с помощью 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; }">

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

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

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

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

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

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

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

  });

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

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

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

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

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

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

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

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

Как я узнал, вы не можете использовать любого из onkeydown, onkeypressили onkeyupсобытий для полного решения , включая мобильные браузеры. Кстати onkeypress, устарела и больше не присутствует в Chrome / Opera для Android (см .: UI Events 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предотвратить неправильные ПРЕДСТАВЛЯЕТ , как указано выше в несколько раз.

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

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

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

Я знаю, что ответ уже есть, но если вы хотите, чтобы ваш ввод вел себя точно так же, как maxlengthатрибут или как можно ближе, используйте следующий код:

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

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

Это может помочь кому-то.

С помощью небольшого количества javascript вы можете искать все локальные данные datetime, искать, если год, который пользователь пытается ввести, превышает 100 лет в будущем:

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