0

我在点击段落时用 textarea 标签替换段落，textarea 应该包含段落中的文本：

<div id="right"><p><pre><?php echo $descri; ?></pre></p></div>

jQuery脚本：

$(function(){
  $('#right').on('click', 'p', function(){
    var $p = $(this);
    var old = $p.html();

    if(/<textarea rows="4" cols="40" id="descri" name="descri"/.test(old))
      return;

    $p.html('<textarea rows="4" cols="40" id="descri" name="descri" value="' + old + '"/>')
       .find('textarea')
       .focus()
       .on('blur', function(){
         var value = this.value;
         $.post('listener_updates.php', {description: value})
          .done(function(){
            $p.html(value);
          })
          .fail(function(){
            $p.html(old);
            alert('Could not update title');
          });
       });
  });
});

现在，当我单击段落文本时，什么也没有发生，但是当我在段落文本下方单击一点时，文本区域出现并且为空。谢谢您的帮助

4

1 回答 1

1

这是因为您不能将pre元素放入p元素中，因此浏览器正在纠正无效的 DOM。的内容模型p是短语内容，但pre在短语内容中无效，仅对流内容有效。

当你把它交给 Chrome 时：

<div class="right"><p><pre>This is the text</pre></p></div>

...它实际上创建了这个 DOM：

<div class"right"><p></p><pre>This is the text</pre><p></p></div>

请注意，pre不再位于 any 中p。

如果您想要pre，只需单独使用pre（没有p）。pre很像p：它们都具有相同的内容模型，它们都在相同的地方有效，并且它们都是display: block默认的。

或者，如果您的唯一目标不是换行等，那么在现代浏览器上，您可以摆脱pre（保留p或使用 adiv如果语义p不合适）并改用 CSSwhite-space属性（例如，white-space: pre） .

在下面回复您的评论：

但我无法让 pre 标记内的文本显示在 textarea 上

只需将pre'scontents()放入textarea，将textareaDOM 放入您想要的位置，然后删除或隐藏pre. 这将其删除，例如：Live Example

$(".right").on("click", "pre", function() {
  var $pre = $(this);
  var $textarea = $("<textarea>");
  $textarea.append($pre.contents());
  $pre.replaceWith($textarea);
  return false;
});
于 2013-10-10T13:11:50.413 回答