将插入符号置于动态生成的跨度之外

Question

So I have perused the piles of information on SO on this subject and finally resorted to asking. 所以我在这个主题上仔细阅读了关于SO的大量信息，最后求助于。

I'm working with a contenteditable div and need to mimic twitter's on-the-fly conversion from unstyled text to styled text for hashtags and mentions (please do not link me to twitter-text, that is not, in and of itself, the answer, I've tried). 我正在使用一个contenteditable div，需要模仿twitter的即时转换，从无格式文本到样式文本的标签和提及（请不要将我链接到twitter文本，这本身不是，本身，回答，我试过了）。

The obvious solution here would be to enclose the text that needs to be styled in a span or, more generally, something I may attach styles to. 这里显而易见的解决方案是将需要在跨度中设置样式的文本，或者更一般地说，我可以附加样式的内容包含在内。

I can do that, but the problem is that the caret then does weird stuff like jump to the beginning. 我可以做到这一点，但问题是，插入符号会像跳到开头那样奇怪。

I've found a solution ( Tim Down's ) which works nicely, but it leaves the caret in the span, so the ensuing text is still styled, which is not what I want. 我找到了一个很好用的解决方案（ Tim Down's ），但是它在插页中留下了插入符，因此后续的文本仍然是样式的，这不是我想要的。

He suggests elsewhere that this is because webkit browsers are opinionated and will force the caret in the span, instead of placing it outside of the span. 他在其他地方建议这是因为webkit浏览器是固执己见的，并且会在跨度中强制插入符号，而不是将其置于跨度之外。 There are two proposed hacks, first, he suggests that you enclose the text in a blocks instead of spans. 有两个提议的黑客，首先，他建议你将文本括在a块而不是跨度。 Which I've tried, but doesn't work. 我试过了，但没有用。 He then suggests that I create a zero width white-space char, and then select that. 然后他建议我创建一个零宽度的空白字符，然后选择它。

So how do I do that? 那我该怎么做？ Or are there any other alternatives? 还是有其他选择吗？

(working code welcome) （欢迎工作代码）

Edit 1: 编辑1：

Reference to "cursor" was corrected to "caret" 对“光标”的引用被更正为“插入符号”

Answer 1

Can you please try placing the content in the label instead of span ? 您能否尝试将内容放在标签中而不是跨度？

That will force the caret position to be at the end. 这将迫使插入符号位置结束。

Please check with the following code.... 请检查以下代码....

<!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>

Click on Say Something 点击Say Something

Hope it helps! 希望能帮助到你！

Answer 2

This may be a duplicate of this question . 这可能与此问题重复。 Dutzi, in that question, recommended adding display: inline-block and a <br> tag. 在这个问题中，Dutzi建议添加display: inline-block和<br>标签。

If you've seen that, or that doesn't work, you can add a null-byte-like character to a string with var string += '\\0'; 如果你已经看到了，或者那不起作用，你可以在一个带有var string += '\\0';的字符串中添加一个类空字节的字符var string += '\\0'; or var string += '\0'; 或var string += '\0'; and select that null byte with 并选择该空字节

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

If this is not what you mean (I wasn't 100% clear on what exactly was happening without code), there may be other solutions, but at the moment, that's how to add and select a zero-length character in javascript. 如果这不是你的意思（我没有100％清楚没有代码究竟发生了什么），可能还有其他解决方案，但目前，这是如何在javascript中添加和选择零长度字符。

将插入符号置于动态生成的跨度之外

问题描述

2 个解决方案

解决方案1
0 2015-05-02 05:56:07

解决方案2
0 2015-05-02 05:57:15

将插入符号置于动态生成的跨度之外

问题描述

2 个解决方案

解决方案1 0 2015-05-02 05:56:07

解决方案2 0 2015-05-02 05:57:15

解决方案1
0 2015-05-02 05:56:07

解决方案2
0 2015-05-02 05:57:15