поле для ввода цифр
Ввод чисел
Для ввода чисел предназначено специальное поле, которое допускает ограничения по нижней и верхней границе, а также устанавливает шаг приращения. Само поле для ввода чисел похоже на обычное текстовое поле, но со стрелками, которые позволяют увеличивать и уменьшать значение (рис. 1).
Рис. 1. Вид поля для ввода чисел
Синтаксис создания поля следующий:
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| min | Минимальное значение. |
| max | Максимальное значение. |
| size | Ширина поля. |
| step | Шаг приращения числа. Может быть как целым (2), так и дробным (0.2). |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальное число, которое выводится в поле. |
Пример 1. Ограничение ввода чисел
HTML5 IE Cr Op Sa Fx
Атрибут step задаёт шаг приращения и по умолчанию равен 1. В то же время значение может быть и дробным числом, как показано в примере 2.
Пример 2. Шаг приращения
HTML5 IE Cr Op Sa Fx
Результат примера продемонстрирован на рис. 2.
Рис. 2. Ввод дробных чисел в поле
Браузеры плохо поддерживают это поле, пока лишь это делает Chrome и Opera. В остальных браузерах поле для ввода числа приобретает вид обычного текстового поля.
Поле для ввода цифр
элементы типа number используются для того, чтобы дать возможность пользователю ввести число. У них есть встроенная валидация, запрещающая вводить нечисловые значения. Браузер может предоставить возможность увеличить или уменьшить значение специальными стрелками, используя мышь или просто двигая пальцем по экрану.
Value
Additional attributes
In addition to the attributes commonly supported by all types, inputs of type number support these attributes:
| Attribute | Description |
|---|---|
| max | The maximum value to accept for this input |
| min | The minimum value to accept for this input |
| placeholder | An example value to display inside the field when it’s empty |
| readonly | A Boolean attribute controlling whether or not the value is read-only |
| step | A stepping interval to use when using up and down arrows to adjust the value, as well as for validation |
The maximum value to accept for this input. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn’t a number, then the element has no maximum value.
This value must be greater than or equal to the value of the min attribute.
The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn’t a valid number, the input has no minimum value.
This value must be less than or equal to the value of the max attribute.
placeholder
The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.
If the control’s content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see Overriding BiDi using Unicode control characters in The Unicode Bidirectional Text Algorithm for those characters.
Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input (Form Input) element for more information.
readonly
A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property.
Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
Строковое значение any означает, что никакое значение шага не задано и допустимо любое значение (в пределах других ограничений, таких как min и max ).
Примечание: Когда значение, введённое пользователем, не подходит под заданное значение шага, user agent может округлить его до ближайшего допустимого значения с приоритетом в большую сторону в том случае, если значение находится ровно посередине шага.
Using number inputs
Important: Bear in mind that logically you should not be able to enter characters inside a number of input other than numbers. There seems to be some disagreement about this among browsers; see баг 1398528.
Note: It’s crucial to remember that a user can tinker with your HTML behind the scenes, so your site must not use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have any security implications of any kind.
Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:
A simple number input
In its most basic form, a number input can be implemented like this:
A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the required attribute is used, the input is no longer considered valid when empty.
Note: Any number is an acceptable value, as long as it is a valid floating point number (i.e. not NaN or Infinity).
Placeholders
Controlling step size
By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10:
In this example you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that’s not a multiple of 10, but it will be considered invalid.
Specifying minimum and maximum values
You can use the min and max attributes to specify a minimum and maximum value that the field can have. For example, let’s give our example a minimum of 0, and a maximum of 100:
In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.
Allowing decimal values
One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as «1.0», it will be considered invalid. If you want to enter a value that requires decimals, you’ll need to reflect this in the step value (e.g. step=»0.01″ to allow decimals to two decimal places). Here’s a simple example:
See that this example allows any value between 0.0 and 10.0, with decimals to two places. «9.52» is valid, but «9.521» is not, for example.
Controlling input size
For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:
Then we add some CSS to narrow the width of the element with the ID number :
The result looks like this:
Offering suggested values
Use of the list attribute with number inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.
Validation
We have already mentioned a number of validation features of number inputs, but let’s review them now:
The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:
Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.
The CSS applied to this example is as follows:
Here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent element, indicating if the current value is valid. We put it on a separate element for added flexibility; some browsers don’t display generated content very effectively on some types of form inputs (read for example the section on validation).
Important: HTML form validation is not a substitute for server-side scripts that ensure that the entered data is in the proper format. It’s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It’s also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).
Pattern validation
elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs won’t be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.
Examples
We’ve already covered the fact that by default, the increment is 1, and you can use the step attribute to allow decimal inputs. Let’s take a closer look. In the following example we’ve set up a form for entering the user’s height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.
The HTML looks like this:
We’ve hidden the feet and inches inputs initially using class=»hidden» so that meters is the default entry type.
Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:
And finally, the JavaScript:
After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we’re not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.
Note that when the user clicks the button, we remove the required attribute(s) from the input(s) we are hiding, and empty the value attribute(s). This is so that we can submit the form if both input sets aren’t filled in, and won’t submit data that we didn’t mean to submit. If we didn’t do this, you’d have to fill in both feet/inches and meters to submit the form!
input поле только для цифр html
Есть поле Вешаю на него событие:
В итоге при вводе буквы её видно на мгновение, а потом она убирается. Как сделать чтобы её не было видно? Так же ещё и «.» надо.
7 ответов 7
Всё, что вам нужно это:
В случае, если вдруг это не подходит, ответ на eng.SO. Мне больше всего понравился вариант:
Проще всего эту задачу решить через event ‘input’. Он используется в чисто в (vamilla js). Аналога, к сожалению, в jq нет. Вот код, который решит эту задачку.
p.s. я немного доработал регулярку
Автор ответа: Гайк Инанц, преподаватель HackerU
Используй не событие keyup, а событие input, и тогда всё будет гуд!
К сожалению не могу писать комментарии, так что напишу тут. Если используете jquery, почему не заюзать маску на поле? jQuery Mask
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.5.40381
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Удобный для пальцев ввод цифр с помощью «inputmode»
Дата публикации: 2018-05-15
Эта большая кнопочная цифровая клавиатура удобна для пальцев и поможет улучшить опыт работы с вашей формой. Однако type = «number» подходит не для всех чисел.
На (многих) больших экранах поля для ввода чисел содержат кнопку увеличить / уменьшить. Это полезный пользовательский интерфейс, который мы получаем по умолчанию. Однако он будет совершенно неуместным, например, при вводе номера кредитной карты.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Пользовательский интерфейс для ввода числа выглядит примерно так во всех стационарных браузерах
В спецификации же четко поясняется: Состояние type = number не подходит для ввода значений, которые состоят из цифр, но сами при этом не являются числом в строгом смысле. Например, было бы нецелесообразно использовать его для ввода номеров кредитных карт или почтовых индексов США. Простой способ определить, следует ли использовать type=number — это рассмотреть вопрос о том, имеет ли смысл, чтобы элемент ввода содержал интерфейс спинбокса (например, со стрелками «вверх» и «вниз»). Ввод номера кредитной карты с ошибкой на 1 в последней цифре не является незначительной ошибкой, так как существенной является каждая цифра. Поэтому не нужно предоставлять пользователю возможность ввести номер кредитной карты с помощью стрелок «вверх» и «вниз». Когда интерфейс spinbox не подходит, type=text, вероятно, является правильным выбором (возможно, с атрибутом pattern).
С помощью CSS скрыть кнопки вверх и вниз довольно просто:
Поле для ввода цифр
Это поле, которое позволяет выбрать цвет.
Пример
Атрибут value используют для установки исходного цвета, его можно не указывать.
Поле ввода даты
Поле типа date позволяет ввести дату с помощью календаря.
Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.
Пример
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)
Пример
Файл FILE
Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.
Пример
Сценарий получения файла на PHP:
Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
Для задания любого шага используйте step=»any».
Пример
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:
Если нужно убрать стрелочки в поле number, задайте стиль:
Поле ввода пароля PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.
Пример
Переключатель RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.
По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.
Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.
Пример
Ползунок RANGE
Поле предназначено для ввода числа в указанном диапазоне.
Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).
Пример
Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.
Пример
Поле range отображается разными браузерами по-разному.
Если хотите своё оформление, задайте стили для ползунка:
Но победить до конца стили IE11 не удастся!
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.