logo标签列表

将插入符号放在动态生成的span之外

javascriptjqueryhtmlcontenteditablecaret
3

我已经浏览了有关此主题的大量信息，最终决定进行提问。

我正在使用 contenteditable div，并且需要模仿 Twitter 的实时转换功能，将未经样式处理的文本转换为带有主题标签和@提及的样式文本（请不要向我提供 twitter-text 链接，那并不是答案，我已经尝试过了）。

显然的解决方案是将需要应用样式的文本包含在一个 span 中，或者更一般地说，我可以将样式附加到其中的某些元素。

我可以这样做，但问题在于插入符会跳到开头等奇怪的位置。

我找到了一个解决方案（Tim Down's），它效果很好，但它会在 span 中保留插入符，因此随后的文本仍然带有样式，这不是我想要的。

他建议 其他地方 ，这是因为 Webkit 浏览器有自己的看法，会强制将光标放在 span 中，而不是放在 span 外面。有两种提出的解决方法，首先，他建议您将文本包含在 a 块中，而不是 spans。我已经尝试过了，但不起作用。然后他建议我创建一个零宽度的空格字符，然后选择它。

那么我该如何做呢？还有其他替代方案吗？

（欢迎提供工作代码）

编辑 1：

“光标”一词已更正为“caret”

在当前版本的Chrome中，<a>技巧对我仍然有效：http://jsfiddle.net/5dxwx/42/ - Tim Down
2个回答
0

你能否尝试将内容放置在标签而不是span中？

这将强制光标位置位于末尾。

请使用以下代码检查...

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script language="javascript">
        function addSomeText()
        {
            var dynaspan = "<label>"+new Date().getTime()+"</label>"
            document.getElementById("clickable").innerHTML += dynaspan;
        }   
    </script>
</head>
<body>
    <div style="width:auto;height:240px;border:1px solid red;" contenteditable="true" id="clickable">
    </div>

    <button onclick="javascript:addSomeText();">Say Something!</button></body>
</html>

点击“说些什么”

希望有所帮助！

0

这可能是此问题的副本。在那个问题中，Dutzi建议添加display:inline-block和<br>标签。

如果您已经看到了那个或者那个不起作用，您可以使用var string +='\0';或var string += '\u00000';向字符串添加类似于空字节的字符，并选择该空字节。

input.setSelectionRange(input.value.length-1, 1);
input.focus();

如果这不是你的意思（我没有代码无法百分之百确定发生了什么），可能还有其他解决方案，但目前在JavaScript中添加和选择零长度字符的方法就是这样。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接