记录--被中文输入法坑死了

对于输入法来说，按键的up和down的key值就算不尽人意也没什么损失，毕竟用户毫无感知。但是，compositionend永远是不会错的，如果compositionend的e.data都不是@字符了，那么在用户的编辑器界面上的显示肯定也会跟着出错。

所以监听这个肯定就是万无一失的方法了，哈哈哈我真是个“天才”（蠢材）。 修改之后让测试同学尝试之后果然就可以了。

坑3：输入法继续坑

起因

时间过去了没一会，本天才就收到了另一个测试同学反馈的问题说为什么输入了一个@字符之后，会出现两个@在界面上？

我第一反应就是难道没有执行到e.preventDefalut()？既然后续功能能正常使用，没执行到也不应该啊🤔。然后在我电脑一通尝试，发现safari浏览器在输入法为中文的情况下也会触发这个问题。

于是，让测试同学的windows电脑连到我的开发环境debug一看（梅开二度）：

执行到了，也没有报错什么的，但是@字符并没有被prevent掉🤯。

再加上我自己传入的@，所以界面上就出现了两个@字符。啊这这这，这很难评......

 我是左思右想，百思不得其解，于是只能:

stack overflow上也有这个问题。

上面大概的意思就是compositionend事件里使用 e.preventDefault() 在技术上可行的，但它可能不会产生你期望的效果。可能是因为 compositionend 事件标志着一次输入构成（composition）会话的结束，而在这个点上阻止默认行为可能没有意义，因为输入的流程已经完成了。

更推荐用keydown,compositionstart和input来处理这种情况。

那keydown是不可能keydown了，已经被坑了。compositionstart也不行，因为刚开始输入那会才按下了shift键，@字符还没出来呢。那就只能input了。

解决办法

最开始我没有选择input就是因为它不能使用e.preventDefault()。我必须要对输入的字符串进行单独处理，去掉@，当时觉得很麻烦就没有选择这个方法。

额....好好好，行行行，现在还是必须得处理一下了。

const selection = window.getSelection();
const { anchorNode, anchorOffset } = selection;
if (anchorNode.substringData(anchorOffset - 1, 1) === '@') {
  selection.anchorNode.deleteData(anchorOffset - 1, 1);
}

写完这个之后，我用自己的safari浏览器测试发现果然没有问题了。

哈哈哈我真是个“天才”（蠢材）。

坑4：输入法深坑🕳️

我自信满满地让测试同学再重试一下😎，然后测试同学说：和之前一样啊，还是有两个@字符。

我：啊？啊啊？？啊啊啊？？？

// addEventListner('keydown', (e) => {
// addEventListner('compositionend', (e) => {
addEventListner('input', (e) => {
  // if (e.key === "@") {
   if (e.data === "@") {
     setTimeout(() => {
       const selection = window.getSelection();
       const { anchorNode, anchorOffset } = selection;
       if (anchorNode.substringData(anchorOffset - 1, 1) === '@') {
         selection.anchorNode.deleteData(anchorOffset - 1, 1);
       } // 这里去掉@字符是为了后续插入和监听方便处理
     });
   
    // 插入有@字符并且可监听输入的元素
    // 唤起小窗....
  }
});