HTML input输入框如何检测退格键按下时对应的光标位置？

对于 <input>、<textarea> 这类原生可输入元素，直接读取元素的 selectionStart 和 selectionEnd 属性即可获取退格触发前的光标位置，这两个属性值从0开始计数，对应输入内容的字符索引。

无选中文本时，selectionStart 与 selectionEnd 取值相等，就是当前光标的所在位置：

• 输入框内容为123时，光标在3之后的位置对应的取值为3，按下退格会删除索引为2的字符3
• 光标在1之前的位置对应的取值为0，按下退格不会触发删除操作

如果存在选中的文本，selectionStart 是选中文本的起始索引、selectionEnd 是结束索引，按下退格会删除两个索引之间的所有内容。

你可以直接在原有的监听逻辑里加对应判断，参考代码如下：

ref.current.addEventListener('keydown', function(e) {
  if (e.code === 'Backspace') {
    const inputElement = e.target
    const cursorStart = inputElement.selectionStart
    const cursorEnd = inputElement.selectionEnd

    // 这里可以根据业务需求使用两个位置值做逻辑处理
    // 示例：打印即将被删除的内容
    let willDeleteContent = ''
    if (cursorStart === cursorEnd) {
      // 无选中内容时删除光标前1位
      if (cursorStart > 0) {
        willDeleteContent = inputElement.value[cursorStart - 1]
      }
    } else {
      // 有选中内容时删除选中区间的所有内容
      willDeleteContent = inputElement.value.slice(cursorStart, cursorEnd)
    }
    console.log('即将删除的内容：', willDeleteContent)

    // 如果需要自定义退格逻辑，可阻止默认行为
    // e.preventDefault()
  }
  // 其余原有逻辑
  // ...
})

注：如果是自定义的contenteditable可编辑元素，需要通过window.getSelection()接口获取光标范围，处理逻辑相对复杂，原生输入元素不需要用到该接口。
注意要在keydown阶段读取位置，此时退格的默认行为还未执行，获取到的是删除前的准确位置，keyup阶段读取的话已经是退格执行后的位置了。

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