如何删除用Range.setStart/setEnd选择的字符

How to delete a character selected with Range.setStart/setEnd?

本文关键字：setStart setEnd 选择 字符 Range 何删除 删除      更新时间：2023-09-26

下面的代码监听分配给div的事件。按h选择左边的下一个字符。按l选择右侧的下一个字符。

  // HTML
  <div class="editable" contenteditable="true">
    <p>This is a test</p>
  </div>
  // JS
  e.preventDefault()
  const range = document.createRange()
  const content = e.target.querySelector('p').firstChild
  if (e.keyCode === 72) { // h
    range.setStart(content, this.start -= 1)
    range.setEnd(content, this.end -= 1)
  }
  if (e.keyCode === 76) { // l
    range.setStart(content, this.start += 1)
    range.setEnd(content, this.end += 1)
  }
  if (e.keyCode === 88) { // x
    range.selectNode(content)
    range.deleteContents()
  }
  window.getSelection().removeAllRanges()
  window.getSelection().addRange(range)

按下x应删除选定的字符。我能做的最好的事情是使用range.selectNode(content)，但这会删除所有字符。

如何只删除选定的字符？

编辑：CodePen：http://codepen.io/alexcheninfo/pen/QNZeQy（点击文本，然后可以按键并查看选择移动。）

从代码中删除range.selectNode(content)，它会选择p中的所有文本。

const input = document.getElementById('editable')
const range = document.createRange()
const content = input.querySelector('p').firstChild
let start = 0
let end = 1
range.setStart(content, 0)
range.setEnd(content, 1)
input.addEventListener('keydown', function(e) {
  e.preventDefault()
  
  if (e.keyCode === 72) { // h
    range.setStart(content, start -= 1)
    range.setEnd(content, end -= 1)
  }
  if (e.keyCode === 76) { // l
    range.setStart(content, start += 1)
    range.setEnd(content, end += 1)
  }
  if (e.keyCode === 88) { // l
    //range.selectNode(content)
    range.deleteContents()
  }
  window.getSelection().removeAllRanges()
  window.getSelection().addRange(range)
});
<div id="editable" contenteditable="true">
  <p>This is a test</p>
</div>

相关文章：