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

Question

我有一个用于用户输入的文本字段，但仅允许有限的字符集。使用 keydown 阻止键盘字符效果很好首先检查击键，然后 event.preventDefault()如果没有通过。

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

此事件可以通过 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 事件，每次通过 Windows 表情符号面板键入或插入字符时，都会扫描文本框的值，并删除任何与正则表达式不匹配的字符。

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