Input type number не работает maxlength

HTML maxlength attribute not working on chrome and safari?

This is my HTML, taken with firebug (on chrome).

I am allowed to write as much as characters as I want in the form field — in Chrome and Safari.

When on Firefox or IE10, the limit is fine.

I haven’t found this issue around on the net.

Note: type=»number» — not text.

Anyone saw this issue before?

7 Answers 7

Max length will not work with the best way i know is to use oninput event to limit the maxlength. Please see the below code.

Use the max attribute for inputs of type=»number» . It will specify the highest possible number that you may insert

if you add both a max and a min value you can specify the range of allowed values:

If, for user experience, you would prefer the user not to be able to enter more than a certain number, use Javascript/jQuery, as seen in this example

The maxlength attribute does not apply to an input of type=»number»

From W3 HTML5 spec concerning type=»number»

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, size, src, and width.

In FF and IE, the input is falling back to be a text input and therefore, maxlength applies to the input. Once FF and IE implement type=»number», they should also implement it in a way where maxlength does not apply.

Источник

maxlength игнорируется для типа ввода= «число» в Chrome

14 ответов

, если значение тип и text , email , search , password , tel или url , этот атрибут задает максимальное количество символов (в кодовых точках Юникода), которое пользователь может ввести; для других типов элементов управления он игнорируется.

так maxlength игнорируется на дизайн.

в зависимости от ваших потребностей, вы можете использовать the min и max атрибуты Инон предложено в его / ее ответе (NB: это будет определять только ограниченный диапазон, а не фактическую длину символа значения, хотя -9999 до 9999 будет охватывать все 0-4-значные числа), или вы можете использовать обычный ввод текста и обеспечить проверку на поле с новым pattern :

максимальная длина не будет работать с лучший способ я знаю, чтобы использовать oninput событие для ограничения maxlength. Пожалуйста, см. ниже код.

можно использовать мин и макс атрибуты.

следующий код делает то же самое:

у меня есть два способа сделать это

Во-Первых: Используйте type=»tel» он будет работать, как type=»number» в мобильном телефоне и принять maxlength:

второй: используйте немного JavaScript:

многие ребята выложили onKeyDown() событие, которое не работает вообще, т. е. вы не можете удалить, как только достигнете предела. Так вместо onKeyDown() использовать onKeyPress() и он отлично работает. Ниже приведен рабочий код:

Я однажды попал в ту же проблему и нашел это решение в отношении моих потребностей. Это может кому-то помочь.

Удачи В Кодировании 🙂

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

измените тип ввода на текст и используйте событие» oninput » для вызова функции:

теперь используйте JavaScript Regex для фильтрации пользовательского ввода и ограничьте его только числами:

вот мое решение с jQuery. Вы должны добавить maxlength к вашему типу ввода=number

и ручка копировать и вставить:

надеюсь, это кому-то поможет.

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

по моему опыту большинство проблем, где люди спрашивают, почему maxlength игнорируется, потому что пользователю разрешено вводить больше, чем» разрешенное » количество символов.

как уже говорилось в других комментариях, type=»number» входы не имеют , а есть min и .

чтобы поле ограничивало количество символов, которые могут быть вставлены, позволяя пользователю знать об этом до отправки формы (браузер если value > max в противном случае), вам придется (по крайней мере, пока) добавить прослушиватель в поле.

вот решение, которое я использовал в прошлом:http://codepen.io/wuori/pen/LNyYBM

в HTML5 спецификация говорит, что maxlength применим только к типам text, url, e-mail, search, tel и password.

maxlenght-тип ввода текста

С помощью jQuery:

maxlenght-номер входного типа

Источник

maxlength игнорируется для типа ввода= «число» в Chrome

14 ответов:

, если значение тип и text , email , search , password , tel или url , этот атрибут определяет максимальное количество символов (в кодовых точках Юникода), которые пользователь может ввести; для других типов элементов управления он игнорируется.

так maxlength игнорируется на дизайн.

в зависимости от ваших потребностей, вы можете использовать элемент min и max атрибуты inon предложенный в его / ее ответе (NB: это будет определять только ограниченный диапазон, а не фактическую длину символа значения, хотя -9999 до 9999 будет охватывать все 0-4-значные числа), или вы можете использовать обычный ввод текста и применять проверку на поле с новым pattern :

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

можно использовать мин и макс атрибуты.

следующий код делает то же самое:

у меня есть два способа сделать это

Во-Первых: Используйте type=»tel» он будет работать, как type=»number» в мобильном телефоне и принять maxlength:

во-вторых: используйте немного JavaScript:

многие ребята выложили onKeyDown() событие, которое не работает на всех, т. е. вы не можете удалить, как только вы достигнете предела. Так что вместо onKeyDown() использовать onKeyPress() и он отлично работает. Ниже приведен рабочий код:

однажды я столкнулся с той же проблемой и нашел это решение в отношении моих потребностей. Это может кому-то помочь.

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

измените тип ввода на текст и используйте событие «oninput» для вызова функции:

теперь используйте регулярное выражение Javascript для фильтрации пользовательского ввода и ограничения его только числами:

вот мое решение с jQuery. Вы должны добавить свойство maxlength, чтобы ваш тип ввода=количество

и обрабатывать копировать и вставлять:

Я надеюсь, что это поможет кому-то.

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

по моему опыту большинство проблем, где люди спрашивают, почему maxlength игнорируется, потому что пользователю разрешено вводить больше, чем «разрешенное» количество символов.

как и другие замечания заявили, type=»number» входы не имеют maxlength атрибут и, вместо этого, есть min и .

чтобы поле ограничивало количество символов, которые могут быть вставлены, позволяя пользователю знать об этом до отправки формы (браузер следует определить значение > max в противном случае), вам придется (на данный момент, по крайней мере) добавить слушателя в поле.

Источник

HTML number input min and max not working properly

I have type=number input field and I have set min and max values for it:

When I change the time in the rendered UI using the little arrows on the right-hand side of the input field, everything works properly — I cannot go either above 23 or below 0. However, when I enter the numbers manually (using the keyboard), then neither of the restrictions has effect.

Is there a way to prevent anybody from entering whatever number they want?

15 Answers 15

Maybe Instead of using the «number» type you could use the «range» type which would restrict the user from entering in numbers because it uses a slide bar and if you wanted to configure it to show the current number just use JavaScript

With HTML5 max and min , you can only restrict the values to enter numerals. But you need to use JavaScript or jQuery to do this kind of change. One idea I have is using data- attributes and save the old value:

In some cases pattern can be used instead of min and max . It works correctly with required .

Here is my contribution. Note that the v max!

Despite the HTML5 enforcement of min and max on the up/down arrows of type=number control, to really make those values useful you still have to use Javascript.

Just save this function somewhere and call it on keyup for the input.

One event listener , No data- attribute.

You can simply prevent it by using following script:

The only problem is: You can’t type — to get negative numbers if your min is lower than 0

This works for me I think you should try this you change the pattern according to your need like you start from pattern 1

This works properly for me.

Use this range method instead of number method.

Forget the keydown or keyup: it won’t let you enter like 15 or 20 if the min was set to 10! Use the change event since this is where the input value goes in your business logic (ViewModel):

This work perfect for geographic coordinates when you have general function document EventListener «keydown» in my example i use bootstrap class.

If you want you can create a function with this code but i preferred this method.

Again, no solution truly solved my question. But combined the knowledge, it somehow worked

What I wanted is a true max/min validator (supporting int/float) for my input control without fancy html5 help

Accepted answer of @Praveen Kumar Purushothaman worked but its hardcoded min/max in the checking condition

@Vincent can help me dynamically validate the input field by max/min attributes but it is not generic and only validating the integer input.

To combine both answer Below code works for me

Afterwards all my inputs are truly responsive on the min max attributes.

Источник

Почему maxlenght не работает в number?

В попытке найти максимально короткий путь для обозначения максимальной длины инпута нашел такой пример, но есть проблема, всё работает пока input type=»text»

но когда type=»number», то уже не работает, почему так происходит?

• Вопрос задан более года назад
• 458 просмотров

Kutuzov_ska, я пробовал, это не помогает
я решил сделать это через метод, просто резать последние символы, если они больше 3х

Но есть новая проблема)
у меня 3 инпута, собственно 3 v-model.number, тут я беру их value и собственно его изменяю, но сам this.atack (к примеру) изменить не могу, либо надо прописывать для каждого инпута отдельно, может есть какой то способ изменить их?

Хотелось бы сделать какой то универсальный метод, что бы можно было применять к любому инпуту

Erl, Делайте по другому. Попробуйте по другому. v-model.number=»atack»

v-on:keyup уберите
добавьте

Могут быть грамматические ошибки:)

Логика такая — пишете метод, с помощью @input отслеживаете (это лучше нажатия клавиш, например клавиши не сработают при копировать — вставить и т.д.), Первым аргументом событие, вторым переменную которую зотите обновить.

watch — добавил чтобы можно было видеть изменения

Вешайте watch на свойство, используемое в v-model, и там исправляйте значение, если нужно. Если есть необходимость делать подобное многократно, для разных input’ов, напишите соответствующую директиву.

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

Но есть новая проблема)
у меня 3 инпута, собственно 3 v-model.number, тут я беру их value и собственно его изменяю, но сам this.atack (к примеру) изменить не могу, либо надо прописывать для каждого инпута отдельно, может есть какой то способ изменить их?

Хотелось бы сделать какой то универсальный метод, что бы можно было применять к любому инпуту

Убил бы. Перечитайте ответ, и на этот раз попробуйте понять, что там написано.

Источник