Часто возникает задача запрета ввода не цифровых значений в поле <input>. В этом материале разберем реализацию данного механизма на JavaScript.
На мой взгляд, самый простой способ воспользоваться обработчиком события .keydown() - в jQuery или прослушивать событие keydown. Итак, предположим у нас есть текстовое поле с id = «only_num».
<input type="text" id="only_num" value="" />
Последние четыре требования можно объединить в одно — ( event.keyCode >= 35 && event.keyCode <= 39 ), правда в этом случае мы разрешаем еще нажатие клавиши вверх keyCode == 38, но, думаю это не критично, а код получится красивее.
const input = document.getElementById('only_num');
input.addEventListener('keydown', function(event) {
// Разрешаем: backspace, delete, tab и escape
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
// Разрешаем: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Разрешаем: home, end, влево, вправо
(event.keyCode >= 35 && event.keyCode <= 39)) {
// Ничего не делаем
return;
} else {
// Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
$(document).ready(function() {
$("#only_num").keydown(function(event) {
// Разрешаем: backspace, delete, tab и escape
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
// Разрешаем: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Разрешаем: home, end, влево, вправо
(event.keyCode >= 35 && event.keyCode <= 39)) {
// Ничего не делаем
return;
} else {
// Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
});
В JavaScript существует несколько основных типов данных. В этой статье мы получим о них общее представление, а позже, в соответствующих главах подробно познакомимся с использованием каждого типа в отдельности.
Часто возникает задача запрета ввода не цифровых значений в поле input. В этом материале разберем реализацию данного механизма на JavaScript.
Методы require() и import() в JavaScript используются для включения модулей. У них есть несколько важных особенностей, о которых должен знать каждый разработчик.