18

我有一个 contenteditable div，其中包含典型的所见即所得编辑器 html（粗体、锚点、列表）。

我需要确定当前光标是否位于 div 的开头和结尾处，onKeyDown。这样做的原因是，根据光标位置和按下的键，我可能想将此 div 与退格上的前一个 div 合并，或者在输入时创建一个新的以下 div。

我一直在摆弄范围，但是当您在元素中使用 html 时，事情变得非常复杂。

我希望我必须忽略一些简单的解决方案。

有没有一种相对简单的方法来确定这一点 - 我愿意使用像 Rangy 这样的库。

谢谢！

编辑：我在想一些事情：

$('.mycontenteditable').bind('keydown', handle_keydown)

handle_keydown = function(e) {

  range = window.getSelection().getRangeAt(0)
  start_range = document.createRange()
  start_range.selectNodeContents(this.firstChild)
  start_range.collapse(true) // collapse to start
  is_start = start_range.compareBoundaryPoints(Range.START_TO_START,range)
  end_range = document.createRange()
  end_range.selectNodeContents(this.lastChild)
  end_range.collapse(false)
  is_end = end_range.compareBoundaryPoints(Range.END_TO_END,range)
}

我会遇到这样的奇怪问题吗？

4

5 回答 5

25

toString()除了使用对象的方法Range而不是cloneContents()避免不必要的克隆之外，我会使用与您类似的方法。此外，在 IE < 9（不支持范围）中，您可以使用text具有TextRange.

请注意，当内容中有前导和/或尾随换行符时，这会出现问题，因为toString()范围的方法就像textContent节点的属性一样工作，并且只考虑文本节点，因此不考虑<br>或块隐含的换行符元素。也没有考虑 CSS：例如，display: none包含通过隐藏的元素内的文本。

这是一个例子：

现场演示：http: //jsfiddle.net/YA3Pu/1/

代码：

function getSelectionTextInfo(el) {
    var atStart = false, atEnd = false;
    var selRange, testRange;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            selRange = sel.getRangeAt(0);
            testRange = selRange.cloneRange();

            testRange.selectNodeContents(el);
            testRange.setEnd(selRange.startContainer, selRange.startOffset);
            atStart = (testRange.toString() == "");

            testRange.selectNodeContents(el);
            testRange.setStart(selRange.endContainer, selRange.endOffset);
            atEnd = (testRange.toString() == "");
        }
    } else if (document.selection && document.selection.type != "Control") {
        selRange = document.selection.createRange();
        testRange = selRange.duplicate();

        testRange.moveToElementText(el);
        testRange.setEndPoint("EndToStart", selRange);
        atStart = (testRange.text == "");

        testRange.moveToElementText(el);
        testRange.setEndPoint("StartToEnd", selRange);
        atEnd = (testRange.text == "");
    }

    return { atStart: atStart, atEnd: atEnd };
}
于 2011-09-19T23:19:34.843 回答
15

这就是我最终解决这个问题的方式。我上面提出的解决方案有时有效，但有很多边缘情况，所以我最终考虑了光标之前或之后有多少文本，如果那是 0 个字符，那么我在开始或结束：

handle_keydown = function(e) {
  // Get the current cusor position
  range = window.getSelection().getRangeAt(0)
  // Create a new range to deal with text before the cursor
  pre_range = document.createRange();
  // Have this range select the entire contents of the editable div
  pre_range.selectNodeContents(this);
  // Set the end point of this range to the start point of the cursor
  pre_range.setEnd(range.startContainer, range.startOffset);
  // Fetch the contents of this range (text before the cursor)
  this_text = pre_range.cloneContents();
  // If the text's length is 0, we're at the start of the div.
  at_start = this_text.textContent.length === 0;
  // Rinse and repeat for text after the cursor to determine if we're at the end.
  post_range = document.createRange();
  post_range.selectNodeContents(this);
  post_range.setStart(range.endContainer, range.endOffset);
  next_text = post_range.cloneContents();
  at_end = next_text.textContent.length === 0;
}

仍然不完全确定还有其他边缘情况，因为我不完全确定如何对此进行单元测试，因为它需要鼠标交互 - 可能有一个库可以在某个地方处理这个问题。

于 2011-09-19T15:48:04.287 回答
5

我想出了这个非常一致且简短的方法：

function isAtTextEnd() {
    var sel = window.getSelection(),
      offset = sel.focusOffset;
  sel.modify ("move","forward","character");
  if (offset == sel.focusOffset) return true;
  else {
    sel.modify ("move","backward","character");
    return false;
  }
}

关键：尝试强制将其向前移动一个字符 - 如果它确实移动了：不是在最后（将它向后移动一个字符），如果它没有 - 它在最后（不需要向后移动，它没有移动）。
实现文本开头是相反的，并且“留给读者作为练习”......

蛀牙：

  • MDN 标记modify为“非标准”，尽管兼容性表显示了相当广泛的支持（根据该表，测试可在最新的 Chrome 和 Firefox 上运行 - Edge 不支持）。
    我尝试使用extend()对它的更多支持 - 但是，奇怪的是，即使在文本末尾，扩展也确实有效。

  • 如果您在用户启动插入符号的移动后检查（例如在键盘或鼠标事件处理程序中） - 您应该处理检查强制插入符号以意外方式移动的情况。

于 2019-03-14T21:59:17.553 回答
0

我今天遇到了同样的问题，没有干净的解决方案，所以我开发了以下方法。它仅使用Selection- 不使用Range或特定于供应商的功能。它还考虑了内容开头和结尾的换行符。

它适用于当前的 Chrome、Firefox、Safari 和 Opera。contenteditable divMicrosoft Edge 再次是异常值，因为当内容的开头或结尾有换行符时，文本选择本身会部分中断。不幸的是，我还没有找到解决该问题的方法。

还值得注意的是，不仅浏览器之间的逻辑不同，white-space模式（normalvs. pre*）之间的逻辑也不同，因为浏览器在输入时会为每个模式生成不同的节点。

document.addEventListener("selectionchange", function() {
  updateCaretInfo(document.getElementById('input-normal'))
  updateCaretInfo(document.getElementById('input-pre'))  
});



function updateCaretInfo(input) {

  function isAcceptableNode(node, side) {
    if (node === input) { return true }

    const childProperty = side === 'start' ? 'firstChild' : 'lastChild'
    while (node && node.parentNode && node.parentNode[childProperty] === node) {
      if (node.parentNode === input) {
        return true
      }

      node = node.parentNode
    }

    return false
  }

  function isAcceptableOffset(offset, node, side) {
    if (side === 'start') {
      return offset === 0
    }

    if (node.nodeType === Node.TEXT_NODE) {
      return offset >= node.textContent.replace(/\n$/, '').length
    }
    else {
      return offset >= node.childNodes.length - 1
    }
  }

  function isAcceptableSelection(selection, side) {
    return selection &&
      selection.isCollapsed &&
      isAcceptableNode(selection.anchorNode, side) &&
      isAcceptableOffset(selection.anchorOffset, selection.anchorNode, side)
  }


  const selection = document.getSelection()
  const isAtStart = isAcceptableSelection(selection, 'start')
  const isAtEnd = isAcceptableSelection(selection, 'end')

  document.getElementById('start-' + input.id).innerText = isAtStart ? 'YES' : 'no'
  document.getElementById('end-' + input.id).innerText = isAtEnd ? 'YES' : 'no'
}
body {
  padding: 10px;
}

[id^="input-"] {
  border:        1px solid black;
  display:       inline-block;
  margin-bottom: 10px;
  padding:       5px;
}
<div contenteditable id="input-normal">Move the caret inside here!</div>
(<code>white-space: normal</code>)

<p>
  Caret at start: <span id="start-input-normal">no</span><br>
  Caret at end: <span id="end-input-normal">no</span>
</p>

<hr>

<div contenteditable id="input-pre" style="white-space: pre-wrap">Move the caret inside here!</div>
(<code>white-space: pre-wrap</code>)

<p>
  Caret at start: <span id="start-input-pre">no</span><br>
  Caret at end: <span id="end-input-pre">no</span>
</p>

于 2018-10-10T22:46:04.133 回答
-1

检查光标/插入符号是否位于输入末尾的简单解决方案：

this.$('input').addEventListener('keydown', (e) => {
  if (e.target.selectionEnd == e.target.value.length) {
    // DO SOMETHING
  }
})
于 2019-06-05T11:52:51.803 回答