Question

使用Javascript：

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

Span 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;

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

问题： 在secound行之后，jquery创建的Tag由于某种原因跳转到一个新行，而不是保持在同一行。

示例：

〜WRONG〜

 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

在HTML5

中实现contentEditable似乎存在问题

通过查看此链接http://jsfiddle.net/MuHvy/10/，您可以点击测试按钮，它会准确报告您的预期，在框中添加一些文字，然后再次点击测试按钮，您会看到因为该框已丢失焦点浏览器会添加额外的 标记。

我找不到有关焦点丢失实施的http://www.w3.org/TR/2008/WD-html5-20080610/editing.html的详细信息

但是，您可以通过在添加下一个元素之前编写一个修剪尾随 的函数来抢占已修复的 标记，但是不同浏览器可能会有所不同

Answer 2

所以当Jason P看着你的HTML时，我也在看着它。我希望这就是你想要的。我在您的display : inline字段中的div内添加了contentEditable个enter。因此，即使您按div并创建了 元素，该元素也将是内联的。

更新了小提琴：http://jsfiddle.net/MuHvy/4/（在Chrome 23和IE10上测试）

对于FF和Safari，您可能希望将''替换为span，然后在点击发生时添加div。

对于IE9：{{1}}本身看起来很怪异，所以让我们忽略它。

关于焦点问题，请看这个问题：jquery Setting cursor position in contenteditable div。这正是您所需要的。希望这可以帮助！

Answer 3

您将不得不进行一些后期处理来修复它。 HTML对空格不敏感，因此从HTML文档的角度来看（以及jQuery写入HTML文档），这个：

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

而且：

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

功能相同。如果你对空白非常敏感，你可能想要考虑使用text（）而不是html（），并写一个textarea而不是div或你正在使用的任何东西。

对于您的最后一个问题，您可以在此处找到您寻求的答案： jQuery Set Cursor Position in Text Area

编辑：

@Gorfl补充说换行实际上是一个换行符后，我做了一些检查。似乎问题是由浏览器处理contentEditable的方式引起的。在firefox中，每一行都以 终止 - 无论你是否输入。在chrome中，每一行都包含在div中。如果您想要一个可靠的跨浏览器解决方案，我认为您将不得不使用contentEditable。相反，只需为keydown或keypress事件附加一个监听器，并将其复制到div主体上。这样你就可以完全控制它的显示方式。

Answer 4

我能够使用

修复断裂线问题

   $('br[type="_moz"]').remove();

由于某种原因，div每次都会在末尾创建一个带有_moz类型的br。

Jquery的：

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

第二行<span>之后的<span>分隔线</span>

4 个答案: