javascript - 在第二行之后换行

Question

代码:http://jsfiddle.net/MuHvy/

Javascript:

    $(document).ready(function () {
    $(".addTag").click(function () {
        $('.questao').html($('.questao').html() + '&nbsp;<span contentEditable="false" class="tagResp">&nbsp;</span>&nbsp;');
        $('.questao').focus();
    });
    });

跨度CSS:

border:2px solid #dadada;
border-color:#9ecaed;
border-radius:7px;
display: inline-block;
height: 10px;
width: 50px;
padding:5px;
margin-top:3px; 
box-shadow:0 0 10px #9ecaed;
white-space:nowrap;

此示例应在用户单击按钮时在当前行中创建一个标记。

问题:在第二行之后，jquery 创建的 Tag 出于某种原因跳转到了新的一行，而不是停留在同一行。

示例:

~错误~

 randomtext randomtext <span>tag</span> <br>
 randomtext <br>
 <span>tag</span>

应该是:

 randomtext randomtext <span>tag</span> <br>
 randomtext <span>tag</span>

另一个问题是:

可以聚焦最后一行吗？ jquery 函数 .focus() 转到文本的开头，应该是结尾。

谢谢!我希望有人能帮助我。

Answer 1

看来 contentEditable 的实现存在问题在 HTML5 中

通过查看此链接 http://jsfiddle.net/MuHvy/10/您可以单击测试按钮，它会准确报告您所期望的内容，向框中添加一些文本，然后再次单击测试按钮，您将看到因为该框失去了焦点，浏览器添加了额外的 <br>。标签。

没有我能找到的细节http://www.w3.org/TR/2008/WD-html5-20080610/editing.html关于focus lost的实现

不过你可以先发帖修复<br>通过编写一个函数来 trim 尾随的标记 <br>在添加下一个元素之前，但是这可能因浏览器而异