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

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

236
задан 02 дек. '11 в 13:33
источник поделиться
19 ответов

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

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

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

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

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

введите описание изображения здесь

220
ответ дан 02 дек. '11 в 13:38
источник

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

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

Это работает только для кнопок управления прядильщиками. Хотя пользователь может ввести число, большее, чем разрешенное 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); 
    }
}
79
ответ дан 02 дек. '11 в 13:36
источник

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

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

65
ответ дан 16 июля '13 в 21:18
источник

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

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


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

Решение:
См. этот или этот для примера.

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

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

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

52
ответ дан 01 авг. '12 в 17:26
источник

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

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
17
ответ дан 09 мая '14 в 5:05
источник

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

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

13
ответ дан 01 окт. '14 в 18:33
источник

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

10
ответ дан 21 янв. '17 в 6:21
источник

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

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

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

9
ответ дан 21 мая '15 в 11:53
источник

Максимальная длина не будет работать с <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"
 />
6
ответ дан 08 янв. '16 в 11:32
источник

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

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

script:

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

5
ответ дан 19 нояб. '14 в 14:26
источник

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

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

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
5
ответ дан 24 июля '14 в 22:55
источник

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

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
3
ответ дан 21 янв. '15 в 5:59
источник

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

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

3
ответ дан 02 дек. '11 в 13:38
источник

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

<input type="tel" maxlength="3" />
3
ответ дан 10 нояб. '14 в 10:32
источник

Другой вариант - просто добавить слушателя для чего-либо с атрибутом 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>
3
ответ дан 30 марта '17 в 1:44
источник

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

1
ответ дан 02 дек. '11 в 13:37
источник

Я уже знаю ответ, но если вы хотите, чтобы ваш ввод вел себя точно так же, как и атрибут 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();
1
ответ дан 20 марта '15 в 1:13
источник

Как я узнал, вы не можете использовать какие-либо из событий onkeydown, onkeypress или onkeyup для полного решения, включая мобильные браузеры. Кстати, onkeypress устарел и больше не присутствует в chrome/opera для android (см.: События пользовательского интерфейса Рабочий проект W3C, 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, чтобы предотвратить неправильные представления, как указано выше, несколько раз.

1
ответ дан 26 янв. '17 в 13:56
источник

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

  });
0
ответ дан 29 сент. '17 в 2:21
источник

Другие вопросы по меткам или Задайте вопрос