我正在开发一个jQuery插件，可以让你做类似Facebook的状态更新输入框中使用@username的标签。
我的问题是，即使经过了几个小时的研究和实验，似乎要简单地移动光标也非常困难。我已经成功地注入了带有某人名字的<a>标签，但在它后面放置光标看起来像火箭科学，特别是如果它应该在所有浏览器中都能正常工作。
而且我甚至还没有考虑将输入的@username文本替换为标签，而不仅仅是像现在一样进行注入...哈哈
在Stack Overflow上有很多关于使用contenteditable的问题，我认为我已经阅读了所有这些问题，但它们并没有真正涵盖我需要的内容。因此，任何人可以提供更多信息都是非常好的：）
<a> ，并且您将其存储在名为aElement的变量中，则可以执行以下操作：var range = rangy.createRange();
range.setStartAfter(aElement);
range.collapse(true);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);
我对此很感兴趣，因此我编写了完整解决方案的起点。以下使用我的Rangy库及其选择保存/恢复模块来保存和恢复选择并规范跨浏览器问题。它将所有匹配的文本（在这种情况下为@whatever）用链接元素包围，并将选择定位到先前的位置。在键盘活动一秒钟后触发此操作。它应该是非常可重用的。
function createLink(matchedTextNode) {
var el = document.createElement("a");
el.style.backgroundColor = "yellow";
el.style.padding = "2px";
el.contentEditable = false;
var matchedName = matchedTextNode.data.slice(1); // Remove the leading @
el.href = "http://www.example.com/?name=" + matchedName;
matchedTextNode.data = matchedName;
el.appendChild(matchedTextNode);
return el;
}
function shouldLinkifyContents(el) {
return el.tagName != "A";
}
function surroundInElement(el, regex, surrounderCreateFunc, shouldSurroundFunc) {
var child = el.lastChild;
while (child) {
if (child.nodeType == 1 && shouldSurroundFunc(el)) {
surroundInElement(child, regex, surrounderCreateFunc, shouldSurroundFunc);
} else if (child.nodeType == 3) {
surroundMatchingText(child, regex, surrounderCreateFunc);
}
child = child.previousSibling;
}
}
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
var parent = textNode.parentNode;
var result, surroundingNode, matchedTextNode, matchLength, matchedText;
while ( textNode && (result = regex.exec(textNode.data)) ) {
matchedTextNode = textNode.splitText(result.index);
matchedText = result[0];
matchLength = matchedText.length;
textNode = (matchedTextNode.length > matchLength) ?
matchedTextNode.splitText(matchLength) : null;
surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
parent.insertBefore(surroundingNode, matchedTextNode);
parent.removeChild(matchedTextNode);
}
}
function updateLinks() {
var el = document.getElementById("editable");
var savedSelection = rangy.saveSelection();
surroundInElement(el, /@\w+/, createLink, shouldLinkifyContents);
rangy.restoreSelection(savedSelection);
}
var keyTimer = null, keyDelay = 1000;
function keyUpLinkifyHandler() {
if (keyTimer) {
window.clearTimeout(keyTimer);
}
keyTimer = window.setTimeout(function() {
updateLinks();
keyTimer = null;
}, keyDelay);
}
HTML:
<p contenteditable="true" id="editable" onkeyup="keyUpLinkifyHandler()">
Some editable content for @someone or other
</p>
既然你说你已经可以在插入符号处插入一个标签，那我就从那里开始。第一件事是在插入标签时给它一个id。你应该有这样的代码：
<div contenteditable='true' id='status'>我和<a href='#' id='atagid'>Jane</a>去购物了</div>
这里有一个函数，可以将光标放在标签后面。
function setCursorAfterA()
{
var atag = document.getElementById("atagid");
var parentdiv = document.getElementById("status");
var range,selection;
if(window.getSelection) //FF,Chrome,Opera,Safari,IE9+
{
parentdiv.appendChild(document.createTextNode(""));//FF wont allow cursor to be placed directly between <a> tag and the end of the div, so a space is added at the end (this can be trimmed later)
range = document.createRange();//create range object (like an invisible selection)
range.setEndAfter(atag);//set end of range selection to just after the <a> tag
range.setStartAfter(atag);//set start of range selection to just after the <a> tag
selection = window.getSelection();//get selection object (list of current selections/ranges)
selection.removeAllRanges();//remove any current selections (FF can have more than one)
parentdiv.focus();//Focuses contenteditable div (necessary for opera)
selection.addRange(range);//add our range object to the selection list (make our range visible)
}
else if(document.selection)//IE 8 and lower
{
range = document.body.createRange();//create a "Text Range" object (like an invisible selection)
range.moveToElementText(atag);//select the contents of the a tag (i.e. "Jane")
range.collapse(false);//collapse selection to end of range (between "e" and "</a>").
while(range.parentElement() == atag)//while ranges cursor is still inside <a> tag
{
range.move("character",1);//move cursor 1 character to the right
}
range.move("character",-1);//move cursor 1 character to the left
range.select()//move the actual cursor to the position of the ranges cursor
}
/*OPTIONAL:
atag.id = ""; //remove id from a tag
*/
}
编辑： 已经测试并修复了脚本，在IE6、Chrome 8、Firefox 4和Opera 11中确实可以工作。手头没有其他浏览器进行测试，但它不使用任何最近更改的函数，因此应该适用于支持contenteditable的任何浏览器。
这个按钮非常方便测试：
<input type='button' onclick='setCursorAfterA()' value='Place Cursor After <a/> tag' >
Nico