javascript – 可折叠元素中的标签式自动完成和插入符号/光标移动

我正在研究一个jQuery插件,它将允许您执行@username样式标签,如Facebook在其状态更新输入框中.

我的问题是,即使经过几个小时的研究和实验,简单地移动插入符也是很难的.我设法注入< a>标记有某人的名字,但将插入符号放在后面似乎是火箭科学,特别是如果它应该在所有浏览器中工作.

而且我甚至没有考虑用标签替换类型的@username文本,而不是只是注入它,因为我现在正在做…哈哈

在Stack Overflow上有很多关于使用contenteditable的问题,我想我已经阅读了所有这些问题,但是它们并没有真正覆盖我所需要的.所以任何人可以提供的任何更多的信息将是很棒的:)

解决方法

您可以使用 my Rangy library,它尝试一些成功来规范浏览器范围和选择实现.如果您设法插入< a>正如你所说,你已经在一个名为aElement的变量中,可以执行以下操作：

var range = rangy.createrange();
range.setStartAfter(aElement);
range.collapse(true);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);