Получение «сырого» значения из поля input type=number

Быстрый ответ

Чтобы извлечь значение из поля ввода <input type="number"> воспользуйтесь свойством value в этом коде:

let rawValue = document.querySelector('input[type="number"]').value;

Но помните: браузер удаляет все символы, не являющиеся числами, превращая их в пустую строку. Если нужно сохранить все символы, включая неподходящие для числового формата, предпочтительнее использовать <input type="text"> и затем преобразовывать полученные данные в число.

Особенности очистки ввода и поведение браузера

Браузер автоматически очищает данные в поле ввода в соответствии с правилами WHATWG и W3C: если символы в поле <input type="number"> не соответствуют числовым, они заменяются пустой строкой.

Самостоятельное извлечение значений с <input type="text">

Если требуется сохранить весь спектр символов, включая нечисловые, используйте <input type="text">:

let rawInput = document.querySelector('input[type="text"]').value;
let parsedNumber = parseFloat(rawInput); // Преобразуем строку в число

Проверка введенных значений на валидность? Безусловно!

Подлинность введенного значения можно проверить при помощи свойства inputElement.validity.valid:

let numberInput = document.querySelector('input[type="number"]');
let isValid = numberInput.validity.valid;

Немедленно обеспечьте пользователю визуальную обратную связь с использованием CSS-псевдокласса :invalid:

input:invalid {
  border: 2px solid red; // Используйте красный цвет: он указывает на наличие ошибки
}

Выделение, отслеживание и реагирование

Команда document.execCommand("SelectAll") выделяет весь текст поля, а window.getSelection().toString() позволяет получить текущее выделение:

input.addEventListener('keyup', (event) => {
  console.log("Нажатая клавиша:", event.key); // Внимательно следим за вводом пользователя
});

Ограничения для числовых полей ввода

Для задания границ числового ввода используйте атрибуты min и max:

<input type="number" min="1" max="10">

Не забудьте убедиться, что ваш браузер поддерживает HTML5 API для валидации, чтобы использовать свойство validity.

Выделение, преобразование и оформление

Метод select() дает возможность выделить текст в поле ввода. Преобразуйте полученные текстовые данные в числовой формат, обработав событие перехода элемента из фокуса (blur):

input.onblur = () => {
   input.value = parseFloat(input.value) || '';
};

Визуализация

Сравните <input type="number"> со сканером цен в супермаркете:

Исходное значение: [1, 2, ., 3, e, 3]    // Какое многообразие символов в поле для ввода!
Результат сканирования: 12.33$            // Но сканер отфильтровывает и принимает только числа.

Как и этот сканер, свойство .valueAsNumber принимает во внимание только числовые значения, отсеивая все остальное.

Расширяем ваши навыки работы с <input>

Обработка сложной пользовательской записи

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

Непрерывная обратная связь

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

Универсальная совместимость

Тестируйте работу форм в разнообразных браузерах и на различных устройствах – ведь обработка данных может вести себя неодинаково в разных окружениях.

Полезные материалы

1. <input type="number"> – HTML: HyperText Markup Language | MDN — информация на MDN о <input type="number">.
2. html – Есть ли в HTML5 тип ввода для чисел с плавающей точкой? – Stack Overflow — обсуждение на Stack Overflow о десятичных числах в <input>.
3. Атрибут type у HTML input — материал от W3Schools об атрибутах <input> в HTML.
4. Учите формы  |  web.dev — руководство от web.dev по созданию качественных форм.
5. HTML стандарт — "живой" стандарт WHATWG, описывающий <input>.
6. Анимация | CSS-Tricks – CSS-Tricks — информация о CSS-анимациях на сайте CSS-Tricks.
7. Свойства и методы форм — руководство от JavaScript.info по работе с формами и их элементами при помощи JavaScript.