如何实现Backspace键先高亮目标文本再二次按键删除的功能？

需求：按下Backspace键时，第一次先高亮指定文本，第二次按下再删除该文本。原代码会直接执行删除操作，需要调整逻辑实现分步效果。

修改后的完整代码 #

<html>
  <body>
    <div id="textareaId" contenteditable="true">
      Hello there
    </div>
    <button onclick=selectText(0,4)>Click to select</button>
    <button onclick=deleteSelectedText()>Click to delete </button>
    <script>
    const contenteditableDiv = document.getElementById('textareaId');
    // 状态变量：记录是否已高亮目标文本
    let isTargetTextSelected = false;

    function selectText(start, end) {
      const range = document.createRange();
      range.setStart(contenteditableDiv.firstChild, start);
      range.setEnd(contenteditableDiv.firstChild, end);

      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
    }

    function deleteSelectedText() {
      const selection = window.getSelection();
      if (!selection.isCollapsed) {
        selection.deleteFromDocument();
        // 删除后重置状态
        isTargetTextSelected = false;
      }
    }

    contenteditableDiv.addEventListener('keydown', (event) => {
      if (event.key === 'Backspace') {
        event.preventDefault(); // 阻止浏览器默认删除行为，避免干扰自定义逻辑
        if (!isTargetTextSelected) {
          // 第一次按Backspace：高亮指定范围文本
          selectText(0, 5);
          isTargetTextSelected = true;
        } else {
          // 第二次按Backspace：删除已高亮的文本
          deleteSelectedText();
        }
      }
      // 同步优化Delete键逻辑
      if (event.key === 'Delete') {
        event.preventDefault();
        const selection = window.getSelection();
        if (selection.isCollapsed && !isTargetTextSelected) {
          // 无选中内容时，第一次按Delete高亮目标文本
          selectText(0, 5);
          isTargetTextSelected = true;
        } else {
          // 已有选中内容或第二次按Delete，执行删除
          deleteSelectedText();
        }
      }
    });
    </script>
  </body>
</html>

核心改动说明 #

• 新增状态变量isTargetTextSelected：用来区分第一次和第二次按键操作，追踪目标文本是否已被高亮。
• 调用event.preventDefault()：阻止浏览器默认的删除行为，避免第一次按键时误删内容。
• 分支逻辑调整：
  • 第一次按Backspace/Delete：执行文本高亮，并标记状态为已选中。
  • 第二次按Backspace/Delete：删除已高亮的文本，并重置状态。

内容的提问来源于stack exchange，提问作者Anirudh S