<跨度>在第二行之后中断行

<span> breaking line after second line

本文关键字：之后 中断 二行 跨度      更新时间：2023-09-26

代码：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;

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

问题：在 secound 行之后，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((转到文本的开头，应该是结尾。

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

看起来在

HTML5中实现contentEditable存在问题

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

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

的详细信息

但是，您可以通过编写一个函数来在添加下一个元素之前修剪尾随<br>，从而抢占后固定<br>标签，但这在浏览器之间可能有所不同

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

更新的小提琴：http://jsfiddle.net/MuHvy/4/(在chrome 23和IE10上测试(

同样，对于FF和Safari，您可能希望将<br>替换为''，然后在单击发生时添加span。

对于IE9：div本身看起来很奇怪，所以让我们忽略它。

对于焦点问题，请看这个问题：jquery 在内容可编辑的div 中设置光标位置。这正是您所需要的。希望这有帮助！

你将不得不做一些后处理来修复它。HTML 对空格不敏感，因此从 HTML 文档(以及 jQuery 写入 HTML 文档(的角度来看，这是：

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

而这个：

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

功能相同。如果你真的对空格敏感，你可能要考虑使用 text(( 而不是 html((，并写入文本区域而不是div 或任何你正在使用的东西。

对于您的最后一个问题，您可以在此处找到您寻求的答案：j查询设置文本区域中的光标位置

编辑：

在@Gorfl添加换行符实际上是换行符之后，我做了更多的检查。似乎问题是由于浏览器处理内容可编辑的方式造成的。在 Firefox 中，每行都以<br>结尾 - 无论您是否按回车键。在 chrome 中，每行都换成一个div。如果你想要一个可靠的跨浏览器解决方案，我认为你将不得不不使用contentEditable。相反，只需为按键或按键事件附加一个侦听器，并让它将按下的键复制到div 正文。这样，您就可以完全控制其显示方式。

我能够使用 

   $('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();
    });
});
相关文章：