Html number input javascript

Input type number

В HTML5 появилось специальное поле с атрибутом type=»number» для вода чисел. Рассмотрим его возможности.

Для поля доступны следующие атрибуты:

Атрибут	Описание
step	Шаг изменения значения
max	Максимальное значение
min	Минимальное значение
placeholder	Подсказка
readonly	Только для чтения
disabled	Заблокирован
list	Связка со списком опций datalist по id
required	Обязательный для заполнения

Шаг изменения

Атрибут step=»1″ задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).

Пример:

Минимальное значение

Атрибут min=»1″ задает минимально возможное значение value . Это значение должно быть меньше или равно значению max . Может быть целым, отрицательным или дробным.

Пример:

Максимальное значение

Атрибут max=»100″ задает максимально возможное значение value .

Пример:

Опции по умолчанию

У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента .

Пример:

Валидация

Если указать атрибут required , то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max .

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

Пример:

Также доступны CSS псевдо свойства :invalid и :valid , с помощью них можно применить стили к неправильно заполненному полю.

input[type="number"]:invalid+span:after < content: '✖'; padding-left: 5px; color: red; >input[type="number"]:valid+span:after

Источник

HTML DOM Input Number Object

The Input Number object represents an HTML element with type=»number».

Access an Input Number Object

You can access an element with type=»number» by using getElementById():

Example

Tip: You can also access by searching through the elements collection of a form.

Create an Input Number Object

You can create an element with type=»number» by using the document.createElement() method:

Example

Input Number Object Properties

Property	Description
autocomplete	Sets or returns the value of the autocomplete attribute of a number field
autofocus	Sets or returns whether a number field should automatically get focus when the page loads
defaultValue	Sets or returns the default value of a number field
disabled	Sets or returns whether a number field is disabled, or not
form	Returns a reference to the form that contains the number field
list	Returns a reference to the datalist that contains the number field
max	Sets or returns the value of the max attribute of a number field
min	Sets or returns the value of the min attribute of a number field
name	Sets or returns the value of the name attribute of a number field
placeholder	Sets or returns the value of the placeholder attribute of a number field
readOnly	Sets or returns whether the number field is read-only, or not
required	Sets or returns whether the number field must be filled out before submitting a form
step	Sets or returns the value of the step attribute of a number field
type	Returns which type of form element the number field is
value	Sets or returns the value of the value attribute of a number field

Input Number Object Methods

Method	Description
select()	Selects the content of a number text field
stepDown()	Decrements the value of the input number by a specified number
stepUp()	Increments the value of the input number by a specified number

Standard Properties and Events

The Input Number object also supports the standard properties and events.

Источник

JavaScript Chapter 8 — Creating Number Input Using JavaScript

Welcome back again, In this JavaScript tutorial, we will discuss how to create an input form that only allows inputting numbers that can be typed into this form. If the user types a letter or other character, it will not work or what is input will not work or what is inputted will not appear on the input form. So the form we are going to create is a form that only accommodates numbers. Henceforth, friends can listen to the tutorial on how to make input only numbers using the following javascript.

Making Input Only Numbers with Javascript

Sometimes in creating an application or website, we are required to create an input form that only allows inputting numbers. This aims to minimize errors in an application that we make. For how to make number validation using javascript, friends, please pay attention to the following explanation. Make an html or php file up to your themes. Here I provide a file with number.html where in this file we will validate numbers or make validation just numbers with javascript. First, we will create a form, friends. Try friends, pay attention to the example syntax for creating a number input form above. First we first create a regular form.

 type="text" onkeypress="return hanyaAngka(event)"> 

But in this form we give an onkeypress event. To make an action when this form is typed or inputted. So when typing occurs in this form, the function is run only() .

onkeypress="return hanyaAngka(event)" 

function hanyaAngka(evt)  var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode  48 || charCode > 57)) return false; return true; > 

if (charCode > 31 && (charCode  48 || charCode > 57)) 

Now try running it in a browser. Only numbers can be input.

How to make the maximum number of digits entered?

To make the maximum number entered, you just need to add the maxlength attribute to the form element. example.

 type="text" maxlength="2" onkeypress="return hanyaAngka(event)"/> 

well, in the example above it means that we only allow 2 digit numbers to be input. Furthermore, you will not be able to type again on the form.

Conclusion

Okay friends, that’s enough for the tutorial, hopefully it’s useful for your themes, if you have trouble, you can ask by filling in the comments column.

Источник

Поле для ввода чисел:

name имя ключа параметра value значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit , а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled . readonly заблокировано изменение пользователем disabled заблокированы доступ, изменение пользователем и передача данных текущего параметра required поле не может быть пустым step
step=20
step=any шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step , то есть делится на него без остатка. Пример разрешённых значений value при step=»20″ : …, -40, -20, 0, 20, 40, …. По умолчанию равен 1 . То есть покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any . min минимально возможное значение value , необходимое для отправки формы max максимально возможное значение value , необходимое для отправки формы placeholder подсказка-заглушка title всплывающая подсказка при наведении курсора мышки autocomplete автозаполнение. Можно его отключить или сделать более конкретизированным. list список рекомендованных значений autofocus фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа

Поле не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.

Количество товара

1. увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,
2. сообщение об ошибки при вводе букв и дробных чисел,
3. минимальное значение 1.

Чётные положительные целые числа

Нечётные положительные целые числа

Источник