Отзывчивая цифровая клавиатура с HTML Javascript
Добавить в избранное
Добро пожаловать в учебник о том, как создать экранную цифровую клавиатуру, используя только чистый Javascript. Да, в наши дни HTML стал намного мощнее и удобнее. Мы даже можем определить поле, которое принимает только числа, но с ним есть только одна проблема…
На мобильных устройствах будет отображаться только экранная клавиатура, и мы не можем ее настроить.
numpad.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Javascript цифровая клавиатура</title>
<!-- (A) ЗАГРУЗИТЬ JS + CSS -->
<!--
<link rel="stylesheet" href="numpad-light.css"/>
-->
<link rel="stylesheet" href="numpad-dark.css"/>
<script src="numpad.js"></script>
</head>
<body>
<!-- (B) ПОЛЯ ВВОДА -->
Поле А: <br>
<input type="text" id="demoA"/>
Поле Б: <br>
<textarea id="demoB"></textarea>
<!-- (C) ПРИСОЕДИНИТЬ ЦИФРОВУЮ КНОПКУ -->
<script>
window.addEventListener("load", () => {
// (C1) ОСНОВНАЯ ЦИФРОВАЯ КНОПКА
numpad.attach({target: document.getElementById("demoA")});
// (C2) СО ВСЕМИ ВОЗМОЖНЫМИ ВАРИАНТАМИ
numpad.attach({
target: document.getElementById("demoB"),
max: 10, // МАКС. 10 ЦИФР
decimal: false, // НЕ ДОПУСКАЕТСЯ ДЕСЯТИЧНЫХ ЗНАКОВ
onselect : () => { // ЗВОНИТЕ ПОСЛЕ ВЫБОРА НОМЕРА
alert("Набор номеров DEMO B.");
},
oncancel : () => { // ЗВОНИТЕ ПО ЭТОМУ ПОСЛЕ ОТМЕНЫ
alert("ДЕМО Б отменено.");
}
});
});
</script>
</body>
</html>
Для вас, ребята, которые не хотят читать весь учебник и просто хотят использовать его как «плагин»:
A. Просто включите файлы CSS и Javascript в свой собственный проект.
B. Определите поля <input> или <textarea>
C. При загрузке окна используйте numpad.attach()прикрепление цифровой клавиатуры к полям.
КАК ЭТО РАБОТАЕТ
На этом давайте теперь перейдем к деталям того, как работает цифровая клавиатура — это для вас, ребята, которые хотят сделать некоторые «глубокие настройки».
ЧАСТЬ 1) ИНИЦИАЛИЗАЦИЯ ЦИФРОВОЙ КЛАВЫ (ПРИЛОЖЕНИЕ HTML)
numpad.js
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<=9; i++) { buttonator(i, "num", () => { numpad.digit(i); }); }
// BACKSPACE
buttonator("⤆", "del", numpad.delete);
// от 4 до 6
for (let i=4; i<=6; i++) { buttonator(i, "num", () => { numpad.digit(i); }); }
// ОЧИСТИТЬ
buttonator("C", "clr", numpad.reset);
// от 1 до 3
for (let i=1; i<=3; i++) { buttonator(i, "num", () => { 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) ДЕЙСТВИЯ КНОПОК
numpad.js
// (B1) ТЕКУЩЕЕ ВЫБРАННОЕ ПОЛЕ + МАКСИМАЛЬНЫЙ ПРЕДЕЛ
nowTarget: null, // Текущее выбранное поле ввода
nowMax: 0, // Текущие максимально допустимые цифры
// (B2) НОМЕР (ОТ 0 ДО 9)
digit: (num) => {
let current = numpad.hdisplay.value;
if (current.length < numpad.nowMax) {
if (current=="0") { numpad.hdisplay.value = num; }
else { numpad.hdisplay.value += num; }
}
},
// (B3) ДОБАВИТЬ ДЕСЯТИЧНУЮ ЗАПЯТУЮ
dot: () => {
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) ПРИСОЕДИНЯЙТЕ ЦИФРОВУЮ ПАНЕЛЬ
numpad.js
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.
Можете посмотреть и скачать пример.
Посмотреть
Скачать