Javascript 将插入符号放置在动态生成的跨距之外_Javascript_Jquery_Html_Contenteditable_Caret

Javascript 将插入符号放置在动态生成的跨距之外

javascript jquery html

Javascript 将插入符号放置在动态生成的跨距之外,javascript,jquery,html,contenteditable,caret,Javascript,Jquery,Html,Contenteditable,Caret,因此，我仔细阅读了关于这一主题的大量信息，最后求助于提问我正在使用一个contenteditablediv，需要模拟twitter的动态转换，从非样式文本转换为样式文本，用于标签和提及（请不要将我链接到twitter文本，这本身并不是答案，我已经尝试过）这里显而易见的解决方案是将需要设置样式的文本包含在一个范围内，或者更一般地说，是我可以附加样式的内容我可以这样做，但问题是插入符号会做一些奇怪的事情，比如跳到开头我找到了一个很好的解决方案（），但它将插入符号保留在跨度中，因此接下来的文本

因此，我仔细阅读了关于这一主题的大量信息，最后求助于提问

我正在使用一个

contenteditable

div，需要模拟twitter的动态转换，从非样式文本转换为样式文本，用于标签和提及（请不要将我链接到twitter文本，这本身并不是答案，我已经尝试过）

这里显而易见的解决方案是将需要设置样式的文本包含在一个范围内，或者更一般地说，是我可以附加样式的内容

我可以这样做，但问题是插入符号会做一些奇怪的事情，比如跳到开头

我找到了一个很好的解决方案（），但它将插入符号保留在跨度中，因此接下来的文本仍然是样式化的，这不是我想要的

他认为这是因为webkit浏览器固执己见，将插入符号强制放在范围内，而不是放在范围外。有两种建议，首先，他建议将文本放在

块中，而不是跨距中。我试过了，但没用。然后他建议我创建一个零宽度的空白字符，然后选择它

那我该怎么做呢？或者还有其他选择吗

（欢迎使用工作守则）

编辑1：

对“光标”的引用已更正为“插入符号”

请尝试将内容放置在标签中，而不是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>


演示
函数addSomeText（）
{
var dynaspan=“”+新日期（）.获取时间（）+“”
document.getElementById（“可点击”）.innerHTML+=dynaspan；
}   
说点什么！

点击说点什么

希望有帮助

这可能是的副本。在这个问题上，Dutzi建议添加

display:inlineblock

和

标记

如果您看到了这一点，或者这不起作用，您可以使用

var string+='\0'向字符串添加一个类似于空字节的字符或变量字符串+='\u00000'
并使用
input.setSelectionRange(input.value.length-1, 1);
input.focus();

如果这不是你的意思（我不是100%清楚在没有代码的情况下到底发生了什么），可能还有其他解决方案，但目前，这就是如何在javascript中添加和选择零长度字符。