Javascript <；span>；在第二行之后断线

代码：

Javascript:

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

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

问题： 在secound行之后，jquery出于某种原因创建的标记会跳到新行，而不是停留在同一行中

示例：

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

~z~错了~

randomtext-randomtext标签

随机文本

标签

应该是：

randomtext-randomtext标签

随机文本标记

另一个问题是：

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

可以把焦点放在最后一行吗？jquery函数.focus（）位于文本的开头，应该是结尾

谢谢！

---

我希望有人能帮我。

你需要做一些后处理来修复它。HTML对空白不敏感，因此从HTML文档（以及jQuery写入HTML文档）的角度来看，这：

randomtext随机文本标记
随机文本
标签

这是：

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

randomtext随机文本标记
随机文本标记

功能相同。如果您真的对空白很敏感，您可能需要考虑使用TeX（）代替HTML-（），并编写一个TeXTaReA而不是DIV或使用的任何东西。 对于您的最后一个问题，您寻求的答案可以在这里找到：

编辑：

---

在@Gorfl添加了换行符实际上是换行符之后，我做了更多的检查。问题似乎是由浏览器处理contentEditable的方式造成的。在firefox中，每一行都以一个

-结束，无论您是否按enter键。在chrome中，每一行都被包装在一个div中。如果你想要一个可靠的跨浏览器解决方案，我认为你不必使用contentEditable。相反，只需为keydown或keypress事件附加一个侦听器，并让它将按键复制到div主体。这样，您就可以完全控制它的显示方式。

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

randomtext随机文本标记
随机文本
标签

这是：

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

randomtext随机文本标记
随机文本标记

功能相同。如果您真的对空白很敏感，您可能需要考虑使用TeX（）代替HTML-（），并编写一个TeXTaReA而不是DIV或使用的任何东西。 对于您的最后一个问题，您寻求的答案可以在这里找到：

编辑：

---

在@Gorfl添加了换行符实际上是换行符之后，我做了更多的检查。问题似乎是由浏览器处理contentEditable的方式造成的。在firefox中，每一行都以一个

-结束，无论您是否按enter键。在chrome中，每一行都被包装在一个div中。如果你想要一个可靠的跨浏览器解决方案，我认为你不必使用contentEditable。相反，只需为keydown或keypress事件附加一个侦听器，并让它将按键复制到div主体。这样你就可以完全控制它的显示方式。

所以当Jason p在看你的HTML时，我也在看它。我希望这就是你想要的。我在css中为

contentEditable

字段中的任何

div

添加了一个

display:inline

。因此，即使在按下

enter

并创建

div

元素之后，该元素仍将是内联的

更新小提琴：（在chrome 23和IE10上测试）

与FF和safari类似，您可能希望将

替换为

'

，然后在单击时添加

span

对于IE9：

div

本身看起来很奇怪，所以我们忽略它

---

关于焦点问题，请看以下问题：。这正是你需要的。希望这有帮助

当Jason p在看你的HTML时，我也在看。我希望这就是你想要的。我在css中为

contentEditable

字段中的任何

div

添加了一个

display:inline

。因此，即使在按下

enter

并创建

div

元素之后，该元素仍将是内联的

更新小提琴：（在chrome 23和IE10上测试）

与FF和safari类似，您可能希望将

替换为

'

，然后在单击时添加

span

对于IE9：

div

本身看起来很奇怪，所以我们忽略它

---

关于焦点问题，请看以下问题：。这正是你需要的。希望这有帮助

HTML5中的

contentEditable

的实现似乎存在问题

通过查看此链接，您可以单击“测试”按钮，它会准确地报告您期望的内容，在框中添加一点文本，然后再次单击“测试”按钮，您将看到，由于框失去焦点，浏览器会添加额外的

标记

关于focus lost的实现，我找不到任何细节

---

但是，在添加下一个元素之前，您可以通过编写一个函数来修剪尾随的

来抢占post fixed

标记，但是这在不同浏览器中可能有所不同

HTML5中的

内容可编辑的实现似乎存在问题

通过查看此链接，您可以单击“测试”按钮，它会准确地报告您期望的内容，在框中添加一点文本，然后再次单击“测试”按钮，您将看到，由于框失去焦点，浏览器会添加额外的

标记

关于focus lost的实现，我找不到任何细节

但是，在添加下一个元素之前，您可以通过编写一个函数来修剪尾随的

来抢占post-fixed

标记，但是这在br中可能有所不同

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

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

 $(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();
    });
});