如何防止“表情符号和符号”被插入到输入中

Question

我正在使用 vue js，但我愿意接受任何普通 js 建议，因为它们的功能都是相同的。

我想阻止通过 IOS 键盘或 (CMD + CTRL + SPACE) 表情符号面板将系统默认表情符号插入文本字段。

插入时，Apple OS 会创建一个输入事件，这意味着此时已经来不及阻止插入了。我们也无法监听 keydown 或 keypress 事件，因为前面提到的事件类型是 input。

我应该监听其他事件类型吗？ 有没有办法从上下文/键盘菜单中完全禁用系统表情符号？

我当前的解决方案是监听输入事件，然后通过用空字符串替换从第一个事件捕获的内容来清理输入。我仅在更可靠的 keydown 事件通过第一次验证检查后才执行此操作。这个解决方案感觉不太优雅，我很惊讶没有在网上找到任何有关它的信息。

这里的代码不起作用，因为事件太晚了：

<input type="text" v-model="text" @input="ignoreSystemEmojis($event)" />

ignoreSystemEmojis(event) {
  if (event.inputType === 'insertText') {      
    event.preventDefault();
  }
},

这显然行不通，因为更改后会发生输入事件。

这就是我的结果：

<input type="text" v-model="text" @input="stripSystemEmojis($event)" />

stripSystemEmojis(event) {
  if (!/^[a-zA-Z\s&\d]*$/.test(event.data)) {
    this.text = this.text.replace(event.data, '');
  }
},

非常感谢帮助！

Answer 1

监听输入事件并去除不需要的字符听起来不错。 但是，您可以使用 HTML5 模式，因为无论如何您都使用正则表达式：

<input type="text" v-model="text" pattern="[a-zA-Z\s&\d]" />

Answer 2

您可以覆盖

CMD

+

CTRL

+

SPACE

键

new Vue({
  el: "#app",
  data: {
    text: "",
  },
  methods: {
    onIOSEmojiPanelOpen(e) {
      e.preventDefault();
    },
    ignoreSystemEmojis(e) {
      if (!/^[a-zA-Z\s&\d]*$/.test(e.key)) {
        e.preventDefault();
      }
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="text" @keydown.ctrl.meta.space="onIOSEmojiPanelOpen($event)" @keydown="ignoreSystemEmojis($event)" />
</div>

Answer 3

pattern

属性对我不起作用。

HTML：

<input oninput="doOnInput()">

JavaScript：

function doOnInput() 
{    
    // That's the only solution that worked to filter pastes and emojis
    // Remove invalid chars from our value
    let value = event.currentTarget.value;
    let fixedValue = "";
    for (const c of value) {
        let code = c.charCodeAt(0);
        if (( code >= 0x20 && code <0x7F)) {
            fixedValue = fixedValue + c;
        }
    }

    // Apply changes if chars were removed
    if (value!=fixedValue) {
        event.currentTarget.value = fixedValue;
    }
}