阻止表情符号插入文本字段

Question

我有一个用于用户输入的文本字段，但只允许有限的字符集。阻止键盘字符可以很好地使用，keydown首先检查击键，然后event.preventDefault()检查是否未通过。

WIN+PeriodWindows 有一个表情符号菜单，可以通过单击或右键激活。该菜单允许用户单击表情符号图标并将它们插入到文本字段中。

该事件可以通过捕获Input，并且角色会显示出来event.data以供审查。但我无法解决的是如何阻止该操作event.preventDefault()并不能阻止此操作。

这是我尝试过的代码类型的示例。

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

深入研究event数据，我发现cancelableis false，而 for keydownit 是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事件，每次通过 Windows 表情符号面板键入或插入字符时，都会扫描文本框的值，并删除任何与正则表达式不匹配的字符。

添加paste事件侦听器将监视从剪贴板粘贴的任何内容，并允许在删除任何不需要的字符之前粘贴内容。这意味着，如果剪贴板中混合了有效和无效字符，则仍然会粘贴有效字符。