[英]Contenteditable / jQuery / Javascript - Select text from cursor / caret to end of paragraph
I'm trying make a new paragraph when the enter key is pressed. 我正在尝试按Enter键的时候写一个新段落。 I can do that and it works well.
我可以做到,而且效果很好。 But now say the cursor is the middle of a paragraph - when enter is pressed I'm trying to select a range from the cursor position to the end of the paragraph.
但是现在说光标在段落的中间-当按下Enter键时,我试图选择从光标位置到段落结尾的范围。 Remove that from the existing paragraph and add it to new paragraph below.
从现有段落中删除该段落,并将其添加到下面的新段落中。
I'm trying to modify the code found in the answer here: Contenteditable - extract text from caret to end of element 我正在尝试修改在此处的答案中找到的代码: Contenteditable-将文本从插入符号提取到元素末尾
$(document).on('keydown', 'p[contenteditable="true"]', function(e) {
if(e.which == 13) { //new paragraph on enter/return
e.preventDefault();
var sel = window.getSelection();
if (sel.rangeCount) {
var selRange = sel.getRangeAt(0);
var blockEl = selRange.endContainer.parentNode;
var range = selRange.cloneRange();
range.selectNodeContents(blockEl);
range.setStart(selRange.endContainer, selRange.endOffset);
remainingText = range.extractContents();
$(this).after('<p contenteditable = "true">'+ remainingText +'</p>');
$(this).next('p').focus();
}
I haven't had much success - mostly due to my lack of understanding when it comes to range, node and selection objects. 我没有取得太大的成功-主要是由于我对范围,节点和选择对象缺乏了解。 Would someone be able to explain how these objects work and how I can adapt the answer above to suit my situation.
有人能够解释这些对象的工作原理,以及我如何调整上面的答案以适合我的情况。
Substring Version: 子串版本:
$(document).on('keydown', 'p[contenteditable="true"]', function(e) {
if(e.which == 13) { //new paragraph on enter/return
e.preventDefault();
cursorIndex = window.getSelection().getRangeAt(0).startOffset;
textBefore = $(this).text().substring(0, cursorIndex);
textAfter = $(this).text().substring(cursorIndex);
$(this).text(textBefore);
$(this).after('<p contenteditable = "true">'+ textAfter +'</p>');
$(this).next('p').focus();
}
}
Here's some code adapted from another answer to remove the Rangy dependency: 这是从另一个答案改编的一些代码,以删除Rangy依赖项:
var sel = window.getSelection();
if (sel.rangeCount > 0) {
// Create a copy of the selection range to work with
var range = sel.getRangeAt(0).cloneRange();
// Get the containing paragraph
var p = range.commonAncestorContainer;
while (p && (p.nodeType != 1 || p.tagName != "P") ) {
p = p.parentNode;
}
if (p) {
// Place the end of the range after the paragraph
range.setEndAfter(p);
// Extract the contents of the paragraph after the caret into a fragment
var contentAfterRangeStart = range.extractContents();
// Collapse the range immediately after the paragraph
range.setStartAfter(p);
range.collapse(true);
// Insert the content
range.insertNode(contentAfterRangeStart);
// Move the caret to the insertion point
range.setStartAfter(p);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
Try this. 尝试这个。
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.