我有一个contenteditable div，其中包含典型的所见即所得编辑器html（粗体，锚点，列表）。
我需要确定当前光标是否为onKeyDown，在div的开头和结尾。原因是，基于光标位置和按下的键，我可能想要将此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)
}
我会遇到类似这样的奇怪问题吗？
我会使用类似的方法，除了使用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 };
}
这就是我最终解决这个问题的方法。我上面提出的解决方案有时会工作但有很多边缘情况，所以我最终考虑了光标前后有多少文本，如果是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;
}
仍然不完全确定还有其他边缘情况，因为我不完全确定如何对其进行单元测试，因为它需要鼠标交互 - 可能有一个库来处理这个问题。
我想出了这个非常一致和简短的方法：
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;
}
}
关键：尝试强制向前移动一个角色 - 如果它实际移动：不在最后（将其移回一个角色），如果没有 - 它在最后（不需要向后移动，它没有移动）。 实现文本的开头是相反的，并且“留给读者练习”......
蛀牙：
modify标记为“非标准”，尽管兼容性表格显示了相当广泛的支持（根据表格测试在最新的Chrome和Firefox上运行 - Edge不支持）。
我尝试使用更受支持的extend() - 但是，奇怪的是，即使在文本末尾，扩展也能正常工作。我今天遇到了同样的问题，没有干净的解决方案，所以我开发了以下方法。它只使用Selection - 没有Range或特定于供应商的功能。它还考虑了内容开头和结尾的换行符。
它适用于当前的Chrome，Firefox，Safari和Opera。 Microsoft Edge再次出现异常，因为当内容的开头或结尾有换行符时，contenteditable divs中的文本选择本身会被部分打破。不幸的是，我还没有找到解决该问题的方法。
值得注意的是，逻辑不仅在浏览器之间，而且在white-space模式（normal与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>检查游标/插入符号是否位于输入末尾的简单解决方案：
this.$('input').addEventListener('keydown', (e) => {
if (e.target.selectionEnd == e.target.value.length) {
// DO SOMETHING
}
})