0

代码：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 创建的标记由于某种原因跳转到新行，而不是停留在同一行。

例子：

~错~

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

应该：

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

另一个问题是：

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

谢谢！我希望有一个人可以帮助我。

4

4 回答 4

3

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

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

没有关于失去焦点的实施的细节我可以找到http://www.w3.org/TR/2008/WD-html5-20080610/editing.html

<br>但是，您可以通过在添加下一个元素之前编写一个修剪尾随的函数来抢占 post fixed标记<br>，但这可能因浏览器而异

于 2013-06-06T13:54:41.497 回答
1

所以当 Jason P 正在查看您的 HTML 时，我也在查看它。我希望这是你想要的。我在你的领域内的display : inline任何地方添加了一个在你的 css 中。因此，即使您按下并创建了一个元素，该元素也将是内联的。divcontentEditableenterdiv

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

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

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

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

于 2013-06-06T13:47:18.937 回答
0

我能够使用解决断线问题

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

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

查询：

 $(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();
    });
});
于 2013-06-06T14:18:36.463 回答
0

你将不得不做一些后处理来修复它。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 中，每一行都以<br>- 终止，无论您是否按 Enter。在 chrome 中，每一行都包含在一个 div 中。如果您想要一个可靠的跨浏览器解决方案，我认为您将不得不不使用 contentEditable。相反，只需为 keydown 或 keypress 事件附加一个侦听器，并将按下的键复制到 div 主体。这样您就可以完全控制它的显示方式。

于 2013-06-06T13:28:57.467 回答