Html input цифровая клавиатура

Отзывчивая цифровая клавиатура с HTML Javascript

Добро пожаловать в учебник о том, как создать экранную цифровую клавиатуру, используя только чистый Javascript. Да, в наши дни HTML стал намного мощнее и удобнее. Мы даже можем определить поле, которое принимает только числа, но с ним есть только одна проблема…
На мобильных устройствах будет отображаться только экранная клавиатура, и мы не можем ее настроить.

numpad.html

Для вас, ребята, которые не хотят читать весь учебник и просто хотят использовать его как «плагин»:
A. Просто включите файлы CSS и Javascript в свой собственный проект.
B. Определите поля или
C. При загрузке окна используйте numpad.attach()прикрепление цифровой клавиатуры к полям.

КАК ЭТО РАБОТАЕТ

На этом давайте теперь перейдем к деталям того, как работает цифровая клавиатура — это для вас, ребята, которые хотят сделать некоторые «глубокие настройки».

ЧАСТЬ 1) ИНИЦИАЛИЗАЦИЯ ЦИФРОВОЙ КЛАВЫ (ПРИЛОЖЕНИЕ HTML)

// (A) СОЗДАТЬ HTML-код с цифровой клавиатурой
hwrap: null, // контейнер-оболочка цифровой клавиатуры
hpad: null, // сама цифровая клавиатура
hdisplay: null, // дисплей номера
hbwrap: null, // обертка кнопок
hbuttons: <>, // отдельные кнопки
init: () => <
// (A1) Обертка
numpad.hwrap = document.createElement(«div»);
numpad.hwrap.id = «numWrap»;
// (A2) ВЕСЬ НУМПАД САМ
numpad.hpad = document.createElement(«div»);
numpad.hpad.id = «numPad»;
numpad.hwrap.appendChild(numpad.hpad);
// (A3) DISPLAY
numpad.hdisplay = document.createElement(«input»);
numpad.hdisplay.id = «numDisplay»;
numpad.hdisplay.type = «text»;
numpad.hdisplay.disabled = true;
numpad.hdisplay.value = «0»;
numpad.hpad.appendChild(numpad.hdisplay);
// (A4) ЦИФРОВЫЕ КНОПКИ
numpad.hbwrap = document.createElement(«div»);
numpad.hbwrap.id = «numBWrap»;
numpad.hpad.appendChild(numpad.hbwrap);
// (A5) КНОПКИ
let buttonator = (txt, css, fn) => <
let button = document.createElement(«div»);
button.innerHTML = txt;
button.classList.add(css);
button.onclick = fn;
numpad.hbwrap.appendChild(button);
numpad.hbuttons[txt] = button;
>;
// 7 ДО 9
for (let i=7; i < numpad.digit(i); >); >
// BACKSPACE
buttonator(«⤆», «del», numpad.delete);
// от 4 до 6
for (let i=4; i < numpad.digit(i); >); >
// ОЧИСТИТЬ
buttonator(«C», «clr», numpad.reset);
// от 1 до 3
for (let i=1; i < numpad.digit(i); >); >
// ОТМЕНИТЬ
buttonator(«✖», «cx», () => < numpad.hide(1); >);
// 0
buttonator(0, «zero», () => < numpad.digit(0); >);
// .
buttonator(«.», «dot», numpad.dot);
// OK
buttonator(«✔», «ok», numpad.select);
// (A6) ПРИСОЕДИНЯЙТЕ ЦИФРОВУЮ КНОПКУ К BODY HTML
document.body.appendChild(numpad.hwrap);
>
window.addEventListener(«DOMContentLoaded», numpad.init);

numpad.init()это первое, что вызывается при загрузке страницы, и все, что он делает, это создает HTML-код Numpad. Мы рассмотрим макет ниже, но да, есть только одна копия Numpad, общая для всех полей ввода.

ЧАСТЬ 2) ДЕЙСТВИЯ КНОПОК

// (B) КНОПКА ДЕЙСТВИЯ
// (B1) ТЕКУЩЕЕ ВЫБРАННОЕ ПОЛЕ + МАКСИМАЛЬНЫЙ ПРЕДЕЛ
nowTarget: null, // Текущее выбранное поле ввода
nowMax: 0, // Текущие максимально допустимые цифры
// (B2) НОМЕР (ОТ 0 ДО 9)
digit: (num) => <
let current = numpad.hdisplay.value;
if (current.length <
if (numpad.hdisplay.value.indexOf(«.») == -1) <
if (numpad.hdisplay.value==»0″) < numpad.hdisplay.value = "0."; >
else < numpad.hdisplay.value += "."; >
>
>,
// (B4) BACKSPACE
delete: () => <
var length = numpad.hdisplay.value.length;
if (length == 1) < numpad.hdisplay.value = 0; >
else < numpad.hdisplay.value = numpad.hdisplay.value.substring(0, length - 1); >
>,
// (B5) ОЧИСТИТЬ ВСЕ
reset: () => < numpad.hdisplay.value = "0"; >,
// (B6) ОК — УСТАНОВИТЬ ЗНАЧЕНИЕ
select: () => <
numpad.nowTarget.value = numpad.hdisplay.value;
numpad.hide();
numpad.nowTarget.dispatchEvent(new Event(«numpadok»));
>

Не буду объяснять построчно, но это должно быть довольно понятно — обрабатывать нажатия кнопок.

ЧАСТЬ 3) ПРИСОЕДИНЯЙТЕ ЦИФРОВУЮ ПАНЕЛЬ

// (C) ПРИСОЕДИНИТЕ ЦИФРОВУЮ КНОПКУ К ПОЛЕ ВВОДА
attach: (opt) => <
// ОПЦИИ
// цель: обязательно, целевое поле.
// max: необязательно, максимальное количество символов. По умолчанию 255.
// десятичный: необязательный, разрешить десятичный? true по умолчанию.
// onselect: необязательный, функция вызова после выбора номера.
// oncancel: необязательно, функция для вызова после отмены.
// (C1) ПАРАМЕТРЫ ПО УМОЛЧАНИЮ
if (opt.max === undefined) < opt.max = 255; >
if (opt.decimal === undefined) < opt.decimal = true; >
// (C2) ПОЛУЧИТЬ + УСТАНОВИТЬ ВАРИАНТЫ ЦЕЛИ
opt.target.readOnly = true; // ПРЕДОТВРАТИТЬ ЭКРАННУЮ КЛАВИАТУРУ
opt.target.dataset.max = opt.max;
opt.target.dataset.decimal = opt.decimal;
opt.target.addEventListener(«click», () => < numpad.show(opt.target); >);
// (C3) ПРИСОЕДИНЯЙТЕ СОБСТВЕННЫЕ СЛУШАТЕЛИ
if (opt.onselect) <
opt.target.addEventListener(«numpadok», opt.onselect);
>
if (opt.oncancel) <
opt.target.addEventListener(«numpadcx», opt.oncancel);
>
>,
// (D) ПОКАЗАТЬ ЦИФРОВУЮ КЛАВИАТУРУ
show: (target) => <
// (D1) УСТАНОВИТЬ ТЕКУЩЕЕ ОТОБРАЖАЕМОЕ ЗНАЧЕНИЕ
let cv = target.value;
if (cv == «») < cv = "0"; >
numpad.hdisplay.value = cv;
// (D2) УСТАНОВИТЕ МАКСИМАЛЬНО РАЗРЕШЕННОЕ СИМВОЛА
numpad.nowMax = target.dataset.max;
// (D3) УСТАНОВИТЬ ДЕСЯТИЧНУЮ ЧАСТЬ
if (target.dataset.decimal == «true») <
numpad.hbwrap.classList.remove(«noDec»);
> else <
numpad.hbwrap.classList.add(«noDec»);
>
// (D4) УСТАНОВИТЬ ТЕКУЩУЮ ЦЕЛЬ
numpad.nowTarget = target;
// (D5) ПОКАЗАТЬ ЦИФРОВУЮ КЛАВИАТУРУ
numpad.hwrap.classList.add(«open»);
>,
// (E) СКРЫТЬ ЦИФРОВУЮ КЛАВИАТУРУ
hide: (manual) => <
if (manual) < numpad.nowTarget.dispatchEvent(new Event("numpadcx")); >
numpad.hwrap.classList.remove(«open»);
>

• (C) Вы уже знаете это, мы используем, numpad.attach()чтобы прикрепить Numpad. Он просто устанавливает параметры как пользовательские dataset.
• Помните, что есть только одна общая цифровая клавиатура HTML? Чтобы отслеживать текущее выбранное поле ввода:
◦ (C2) При нажатии на поле ввода срабатывает numpad.show().
◦ (D4) Выбранное поле ввода будет зарегистрировано во numbpad.nowTargetфлаге.
◦ (D2 и D3) Параметры максимальной длины и десятичного числа также будут считаны datasetи зарегистрированы соответствующим образом.
• (D & E) Чтобы отобразить цифровую клавиатуру, мы добавляем openкласс CSS в оболочку HTML. Поэтому, чтобы закрыть его, мы просто удаляем open.

Можете посмотреть и скачать пример.
Посмотреть
Скачать

Источник

Атрибут inputmode

Если нужно ввести только цифры зачем показывать всю клавиатуру? Подсказка для браузера какой набор символов нужен.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Атрибут inputmode говорит браузеру на устройствах с экранной клавиатурой какой набор символов показать при вводе данных в конкретное поле. Указывается для элементов или .

Пример

Скопировать ссылку «Пример» Скопировано

  input type="text" inputmode="numeric"> textarea inputmode="text">textarea>    Скопировать Скопировано Не удалось скопировать   

  input type="tel" inputmode="tel">    Скопировать Скопировано Не удалось скопировать   

  input type="email" inputmode="email">    Скопировать Скопировано Не удалось скопировать