Javascript 在 ContentEditable Div 中设置插入符

发布于 2024-09-16 13:37:14 字数 341 浏览 8 评论 0原文

我有一个内容可编辑的 div 标签，以便用户可以在 div 中键入内容。有一个函数可以在用户按下按钮时将链接添加到 div 中。我希望插入符号位于链接之后，以便用户可以继续键入。该链接可以插入多次。

示例代码：

<div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div>

我需要此代码在以下版本中工作：IE、Firefox、Opera、Safari 和 Chrome。

有人可以提供任何帮助吗？

原文

I have a div tag that is contenteditable so that users can type in the div. There is a function that adds a link into the div when the user presses a button. I would like the caret to be positioned after the link so that users can continue to type. The link can be inserted many times.

Example Code:

<div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div>

I require this code to work in: IE, Firefox, Opera, Safari and Chrome.

Can anyone offer any help?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感受沵的脚步 2024-09-23 13:37:14

假设您有对已插入名为 link 的变量中的元素的引用：

function setCaretAfter(el) {
    var sel, range;
    if (window.getSelection && document.createRange) {
        range = document.createRange();
        range.setStartAfter(el);
        range.collapse(true);
        sel = window.getSelection(); 
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        range.collapse(false);
        range.select();
    }
}

setCaretAfter(link);

Assuming you have a reference to the <a> element you've inserted in a variable called link:

function setCaretAfter(el) {
    var sel, range;
    if (window.getSelection && document.createRange) {
        range = document.createRange();
        range.setStartAfter(el);
        range.collapse(true);
        sel = window.getSelection(); 
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        range.collapse(false);
        range.select();
    }
}

setCaretAfter(link);

回复收藏 0 原文