javascript - 如何监听特定字符javascript的删除

Question

我在尝试找到解决方案时遇到了麻烦..

如何监听某个字符的删除/退格

所以我知道我可以像这样监听退格事件..

function() {
    const textarea = document.querySelector('textarea');
    const backspace = 8;
    textarea.addEventListener('keydown', (event) => {
        if(event.keyCode === backspace) {
           // do something
        }
    });
}

但我想做的是，如果我退格并且删除的字符是 @ - 然后做一些事情

我怎么能做这样的事情？？

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

您可以获取 textarea 的 selectionStart 以获取插入符位置，然后访问该值的索引(减一)以获取将要显示的字符删除:

const textarea = document.querySelector('textarea');
const backspace = 8;
textarea.addEventListener('keydown', (event) => {
  if (event.keyCode === backspace) {
    console.log('backspace');
    const { value } = textarea;
    const charToBeDeleted = value[textarea.selectionStart - 1];
    if (charToBeDeleted === '@') {
      console.log('deleting @...');
    }
  }
});

textarea {
  width: 100%;
  height: 200px;
}

<textarea></textarea>

还要确保使用 === 来检查相等性 - = 是赋值。

如果你想检查用户通过选择删除多个字符的可能性，那么你还必须检查 selectionEnd 和 slice适当的值:

const textarea = document.querySelector('textarea');
const backspace = 8;
textarea.addEventListener('keydown', (event) => {
  if (event.keyCode === backspace) {
    console.log('backspace');
    const { value, selectionStart, selectionEnd } = textarea;
    const stringToBeDeleted =
      selectionStart === selectionEnd
      ? value[selectionStart - 1]
      : value.slice(selectionStart, selectionEnd);
    
    console.log(stringToBeDeleted);
    
    if (stringToBeDeleted.includes('@')) {
      console.log('deleting @...');
    }
  }
});

textarea {
  width: 100%;
  height: 200px;
}

<textarea></textarea>