分享
三行代码  ›  专栏  ›  技术社区  ›  Smokey Dawson

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

  •  2
  • Smokey Dawson  · 技术社区  · 1 年前

    我很难找到解决办法。

    我怎样才能听到某个字符的删除/退格

    所以我知道我可以听退格事件,就像这样……

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

    但我要做的是,如果我退格,删除的字符是 @ -那就做点什么吧

    我怎么能做这种事??

    任何帮助都将不胜感激!

    谢谢

    1 回复  |  直到 1 年前
        1
  •  2
  •   CertainPerformance    1 年前

    你可以得到 selectionStart textarea 要获取插入符号位置,请访问值的索引(减去一个)以获取要删除的字符:

    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 @...');
        }
      }
    });
    文本区域{
    宽度:100%;
    高度:200px;
    }
    <text区域></text区域>