Управление HTML DOM с ванильным JavaScript

Авторизоваться

В этом примере мы заставим пользователей вводить символы только из данного набора. В частности, поддерживаемые символы в этой демонстрации включают цифры и пробел. Конечно, вы можете применить эту идею и к другим персонажам.

Вот наш элемент ввода:

<input type="text" id="input" />

1. Обработка событий

Обрабатывая событие keypress, мы можем запретить пользователю вводить символы, кроме цифр и пробела:

const ele = document.getElementById('input');

ele.addEventListener('keypress', function(e) {
    // Get the code of pressed key
    const key = e.which || e.keyCode;

    // 0, 1, ..., 9 have key code of 48, 49, ..., 57, respectively
    // Space has key code of 32
    if (key != 32 && (key < 48 || key > 57)) {
        // Prevent the default action
        e.preventDefault();
    }
});

Выглядит хорошо, но этого недостаточно, поскольку пользователь все еще может вставлять или перетаскивать неподдерживаемые символы в инпут. Эти случаи могут быть обработаны событием input:

// Track the current value
let currentValue = ele.value || '';

ele.addEventListener('input', function(e) {
    const target = e.target;

    // If users enter supported character (digits or space)
    /^[0-9\s]*$/.test(target.value)
        // Backup the current value
        ? currentValue = target.value
        // Otherwise, restore the value
        // Note that in this case, `e.preventDefault()` doesn't help
        : target.value = currentValue;
});

Здесь мы проверяем, соответствует ли значение регулярному выражению /^[0-9\s]*$/, которое охватывает цифры и пробелы.

Он исправляет случаи, когда пользователи вставляют с клавиатуры (Ctrl + V), контекстного меню или перетаскивают текст в инпут.

Но есть и другая проблема. Вызов target.value = currentValue поместит курсор в конец ввода. Мы должны сохранить позицию курсора.

// Track the current cursor's position
const selection = {};

ele.addEventListener('keydown', function(e) {
    const target = e.target;
    selection = {
        selectionStart: target.selectionStart,
        selectionEnd: target.selectionEnd,
    };
});

Когда пользователь изменит входное значение, мы восстановим и значение, и позиции выбора, если значение не поддерживается:

ele.addEventListener('input', function(e) {
    const target = e.target;

    if (/^[0-9s]*$/.test(target.value)) {
        currentValue = target.value;
    } else {
        // Users enter the not supported characters
        // Restore the value and selection
        target.value = currentValue;
        target.setSelectionRange(
            selection.selectionStart,
            selection.selectionEnd
        );
    }
});

Мы можем объединить отслеживаемые свойств (value, selectionStart и selectionEnd) к одной переменной.

2. Используйте специальный тип инпута

Мы можем использовать специальный тип HTML 5 для обслуживания конкретных случаев использования:

input	Описание
`<input type="color" />`	Позвольте пользователю указать цвет
`<input type="date" />`	Позвольте пользователю ввести дату
`<input type="email" />`	Позвольте пользователю ввести адрес электронной почты
`<input type="number" />`	Разрешить пользователю вводить только цифры
`<input type="tel" />`	Позвольте пользователю ввести номер телефона
`<input type="time" />`	Позвольте пользователю ввести время
`<input type="url" />`	Позвольте пользователю ввести URL

Есть больше встроенных типов, которые вы можете изучить здесь.

В нашем конкретном примере <input type="number" /> это не помогает, потому что не позволяет ввести пробел.

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

1. Обработка событий

2. Используйте специальный тип инпута