从光标/插入符号到段落结束选择文本
Contenteditable / jQuery / Javascript - Select text from cursor / caret to end of paragraph
当按下回车键时,我正在尝试创建一个新段落。我能做到,而且效果很好。但是现在假设光标是段落的中间-当按enter键时,我试图选择从光标位置到段落末尾的范围。将其从现有段落中删除,并添加到下面的新段落中。
我试图修改在这里的答案中找到的代码: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();
}
我没有取得多大的成功——主要是因为我对范围、节点和选择对象缺乏理解。有没有人能解释一下这些物体是如何工作的,以及我如何根据我的情况调整上面的答案?
http://jsfiddle.net/UU4Cg/17/子字符串版本:
$(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();
}
}
下面是一些从另一个答案中改编的代码,用于删除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);
}
}
试试这个
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();
}
}
相关文章:
- 为什么“;未定义的“;在JavaScript中结束循环
- 循环结束/推送到数组之前在页面上呈现EJS
- 在另一个函数成功结束后调用该函数
- 在动画结束之前调用函数
- 希望日期开始结束于while循环中的一个房间id的一个数组
- Javascript-在文本区域中断,但不在段落中中断
- 使用nunjucks时发生块结束错误
- HTML5获取弧的坐标's结束
- 内容结束时停止无限滚动
- 附加“;显示更多“;仅当满足设定的字符数时,链接到截断的段落
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 如何在视频上显示海报图像使用Jquery结束
- 使用while循环+break是一种可接受的方式;goto;手术的结束
- 处理第三方库发送的ajax请求的开始和结束事件
- 结束后Javascript倒计时计时器重定向
- 如何在鼠标悬停时将对象从起始位置移动到结束位置,然后在鼠标悬停后再次移动
- 第一个字第一个字符第二个字第二个字符,一直到数组结束
- 从一组具有相同起始和结束的所有段落的段落中提取包含特定字符串的段落
- 从光标/插入符号到段落结束选择文本
- Javascript正则表达式段落不以句号结束