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


359

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


5
Для людей, которые ищут лучшее решение, это лучшее: stackoverflow.com/questions/9361193/…
Юнсал Коркмаз,

4
Атрибут max не работает в браузере Chrome на планшете Android.
Навсегда

4
@ ÜnsalKorkmaz: у этого решения есть недостаток, заключающийся в том, что он не отображает цифровую клавиатуру на устройствах Android
Will

Ответы:


340

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

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

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

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

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

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


4
Кристер, это сработало. Также, как сказал @Andy, я использовал oninput для нарезки дополнительных чисел. Ссылка mathiasbynens.be/notes/oninput
Прасад

7
@Prasad - Если ответ Энди правильный, выберите его, а не получивший наибольшее количество голосов.
Моше

81
Это правильно, но следует отметить, что Энди заявляет, что это не мешает набирать более длинные цифры. Так что на самом деле это не эквивалент максимальной длины в текстовом поле.
DA.

9
Если вы просто вошли в число с плавающей точкой более высокой точности, это сломается. Например, 3.1415926 справляется с этим, потому что оно меньше 999 и больше 1.
0112

44
Я не знаю, почему это так одобряется и принимается, когда это просто не работает! Он влияет только на элементы управления «spinner» и ничего не делает для того, чтобы пользователь не
набирал

115

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

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

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

Сообщение проверки Chrome для номеров, превышающих максимальное
Скриншот взят из Chrome 15

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

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

11
Одна возможная проблема с этим подходом JavaScript: он может работать не так, как ожидалось, если точка вставки не находится в конце значения. Например, если вы введете значение «1234» в поле ввода, затем переместите точку вставки обратно в начало значения и введите «5», вы получите значение «5123». Это отличается от поля ввода type = "text" с максимальной длиной 4, где браузер не позволит вам ввести 5-й символ в поле "full", и значение останется "1234".
Джон Шнайдер

@Andy, очевидно, вопрос заключается в том, чтобы найти способ не-JS maxlength.............
Pacerier

4
@Pacerier: что-то в моем ответе означало, что я думал иначе? Как вы можете видеть, я предложил наиболее близкое решение, которое может быть достигнуто с использованием только HTML, наряду с дополнительным предложением, в котором используется JavaScript, где OP, возможно, хотел запретить пользователю вводить больше символов, чем разрешено.
Энди Э,

84

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

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


3
Отличная находка, это сработало как шарм, спасибо, что не нужно было создавать дополнительный javascript.
Диего

9
Я обнаружил, что это не лучшее решение для числового ввода, потому что «тел» ввод дополнительных символов, и он отображает буквы рядом с каждым числом. Чисто цифровая клавиатура выглядит намного чище.
hawkharris

@hawkharris Вы правы, type = "number" - более чистый пользовательский интерфейс. Проще случайно набрать плохой символ. Поэтому требуется дополнительная проверка, чтобы убедиться, что пользователь не вводит неверные данные. Но также учтите, что пользователь может так же легко ввести все десятичные точки с помощью цифровой клавиатуры. Также это не решает вопрос выше без дополнительного JavaScript.
Дуэйн

1
Спасибо, я работаю над мобильным приложением ionic framework, и это решило мою проблему
Ахмед

1
если используется с pattern = "[0-9] *", дополнительные символы будут отключены
apereira

71

Вы можете объединить все это так:

<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: обратите внимание, что при вводе более десятичной точки может возникнуть путаница с числовым значением.


Это хорошее решение, но я считаю, что object.value.length возвращает 0, если введены какие-либо нечисловые значения.
Андрей

1
@AndrewSpear Это потому, что object.value будет пустой строкой, если вы введете нечисловые значения во входах с установленным типом «число». Смотрите документацию. Также, пожалуйста, прочитайте мое обновление, чтобы исправить эту проблему.
Дэвид Рефуа

Это все еще ломается, если вы вводите более одной десятичной точки, например 111..1111. Не используйте этот код для безопасности, так как вредоносный код все еще может пройти.
PieBie

@PieBie Чувак, этот код для 3+ лет назад. Используйте вместо этого jQuery.
Дэвид Рефуа

1
да, я знаю это, но новички могут все еще просто скопировать это.
PieBie

26

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

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

12
С вашим решением вы не сможете использовать клавишу Backspace, когда наберете 2 символа. но я
упускаю

12
Вместо onKeyDown вы должны использовать onKeyPress.
Рупеш Арора

1
не будет работать, если вы выделите текст и нажмете символ (то есть, чтобы заменить содержимое ввода)
Arijoon

проверьте это, если это не из следующих ключей stackoverflow.com/a/2353562/1534925
Акшай

3
проблема в keydownтом, что вы не можете использовать клавишу Backspace при максимальном количестве символов. проблема в keypressтом, что вы можете копировать + вставлять за пределы макс символов.
Ставм

23

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

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


... Отлично, но тебе больше не нужны мин и макс, чувак. (просто говорю)
xoxel

2
@xoxel вы делаете, если хотите, чтобы предупреждающее сообщение все еще отображалось
DNKROZ

Это действительно хорошо ... Спасибо
Vincy Oommen

ради обобщения я бы сделалonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Ориадам

18

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

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

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


Атрибут pattern не поддерживается в IE9 и более ранних версиях, а также частично поддерживается в Safari: caniuse.com/#feat=input-pattern
diazdeteran

Да, спасибо за указание, но мы отказались от поддержки IE9 (исключая из нее горчицу), и я предпочитаю ее методам JS. Зависит от проекта.
Крис Панайофф

2
При этом пользователю не запрещается вводить нечисловые символы. Они могут ввести 2 любых символа. patternТолько вызывает выдвижение на первый план проверки.
BRT

протестировано на Android 9 (Nokia 8), но я получаю обычную клавиатуру :( есть идеи?
oriadam

14

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


1
Проблемы, которые я вижу здесь: 1. заменить на выделение текста и тип не работает, если ввод достиг 7 цифр 2. увеличить ввод на 1, когда срабатывает переполнение "границы" работает -> 9999999 и кликнуть вверх кнопка.
Нарушает

Я попробовал с простой версией JavaScript. Если вы хотите, вы можете увидеть, используя фрагмент кода Выполнить. Таким образом, я не нашел никаких ограничений.
Прасад

1
Также не нашел никаких ограничений. Он останавливается на 7 цифрах. Я использую это решение для моего кода.
Клаудио

Есть ограничение. Когда вы достигнете предела, выберите все и хотите заменить их, это не работает. Замена работает только для меня, когда я перезаписываю значение с помощью cur, прежде чем вернуть false.
Insomnia88

@ Insomnia88, @ edub, что если мы напишем функцию и проверим необходимые условия ...
Прасад Шинде

12

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


10

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

Работал как шарм!
СибовГ

9

Допустим, вы хотели, чтобы максимально допустимое значение было 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; }">

8

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

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

slice удалит символы без ведома конечного пользователя при вставке между ними. тогда как максимальная длина будет заблокирована.
Прадип Кумар Прабахаран

@PradeepKumarPrabaharan maxlengthне поддерживается вводом чисел. В моем примере, value.slice(0,16)не включится, если значение ввода не превышает 16 символов.
thdoan

да maxlength не поддерживается для числовых вводов .. этот код является gud, но этот код точно не соответствует свойству maxlength ..
Pradeep Kumar Prabaharan

@TobiasGaertner type="number"позаботится об этом :).
thdoan

@ 10basetom ... в зависимости от браузера ... например, в FF вы все еще можете вводить символы, и они не будут останавливаться после ограничения - но в отношении идеи номера типа это приемлемое решение.
Тобиас Гертнер

6

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

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

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

2
Нет. Попробуйте вставить значение.
Qwertiy

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


Вы можете легко вставить символы.
Джессика

4

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

  });

4

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

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

не работает на Android Chrome. У onkeypress есть некоторые проблемы с этим.
Аакаш Тхакур

3

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

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


3

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

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


он не правильно ответил на вопрос, но проголосовал, так как решил мою проблему :)
TrOnNe

2

Как я узнал, вы не можете использовать любого из 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предотвратить неправильные ПРЕДСТАВЛЯЕТ , как указано выше в несколько раз.


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

1

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

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

@tiltdown извините за опечатку. Исправил ответ.
шиноби

1

Я знаю, что ответ уже есть, но если вы хотите, чтобы ваш ввод вел себя точно так же, как 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();

@Phill_t может ты меня просветишь? Я использовал ваш код, и он работает хорошо в принципе, НО "$ (this) .attr (" maxlength ")" всегда доставляет 2. И почему было бы лучше использовать "$ (this) .attr (" maxlength ")" если бы он работал вместо просто «this.maxlength», которое я тестировал, и работал как ожидалось, и короче, и imho также более понятным для чтения? Я что-то пропустил?
Маркус с

Что значит "поставляет 2"?
Philll_t

Phill_t мои извинения. «this.maxLength» работает только в рамках функции keydown. В функции «addMax» «this» является документом, а не ожидаемым элементом и, следовательно, имеет разные значения атрибута. Как мне получить доступ к вводу номера вместо этого? Вышеприведенный код действительно работает на вашей стороне? Я тестировал с Chrome / Opera / Vivaldi, Firefox, Edge, IE и Safari и имел одинаковые результаты для каждого браузера. Хорошо, в Edge maxlegth = "1" и maxlength = "2", где действительно работает, но "$ (this) .attr (" maxlength ")" больше не увеличивается для любого большего числа !!? @anybody: Есть предложения?
Маркус с

Как я уже сказал, всегда два, потому что он вызывается в документе, а не в рассматриваемом элементе, как я выяснил, когда отлаживал его. Кстати, вы также можете посмотреть на мое решение, которое я выяснил после изучения вашего: stackoverflow.com/a/41871960/1312012
markus s


0

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

С помощью небольшого количества 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);
      }
    })
  });
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.