Заблокировать Emoji от вставки в текстовое поле

Question

У меня есть текстовое поле для ввода пользователя, но разрешен только ограниченный набор символов.Блокировка символов клавиатуры работает нормально, используя keydown, чтобы сначала проверить нажатие клавиши, затем event.preventDefault(), если она не прошла.

В Windows есть меню Emoji, которое можно активировать с помощью WIN+Period или щелчком правой кнопки мыши.Меню позволяет пользователю нажимать значки Emoji и вставлять их в текстовое поле.

Это событие может быть записано с помощью Input, а символ отображается в event.data для проверки.Но я не могу решить, как заблокировать действие event.preventDefault() не останавливает это.

Вот пример типа кода, который я пробовал.

textbox.addEventListener( "input", event => {
 if ( event.data === BAD ) {
  event.preventDefault();
 }
}, false);

Копаем вevent данные Я вижу, что cancelable это false, тогда как для keydown это true.

Возможно ли другое событие, кроме input, для захвата этого события раньше?

Answer 1

Основываясь на предложении @ CoryCoolguy, одним из решений является удаление символов из текстового поля после их ввода путем проверки содержимого поля.

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

textbox.addEventListener( "input", event => {
 textbox.value = textbox.value.replace( /[^a-zA-Z0-9 ]/gm, '');
}, false);

textbox.addEventListener( "paste", event => {
 textbox.value = textbox.value.replace( /[^a-zA-Z0-9 ]/gm, '');
}, false);

Используя событие input, каждый раз, когда символ вводится или вставляется через панель Emoji Windows, значение текстового поля равносканируются и все символы, не соответствующие регулярному выражению, удаляются.

Добавление прослушивателя событий paste будет отслеживать все, что вставлено из буфера обмена, и позволит вставить содержимое перед удалением любых нежелательных символов.Это означает, что если в буфере обмена есть сочетание действительных и недействительных символов, то действительные все равно будут вставлены.