Question

我在点击段落时用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');
          });
       });
  });
});

现在，当我点击段落文本时，没有任何反应，但是当我在段落文本下点击一下时，然后textarea出现并且为空。谢谢你的帮助

Answer 1

这是因为您无法在pre element内放置p element，因此浏览器会更正无效的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已不再存在p。

如果您想要pre，只需单独使用pre（不使用p）。 pre与p非常相似：它们都具有相同的内容模型，它们在同一个地方都有效，默认情况下它们都是display: block。

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

重新评论以下内容：

但是我无法在pre标签内找到要在textarea上显示的文字

只需将pre的{{1}}放入contents()，将textarea放在您想要的DOM中，然后删除或隐藏textarea }。这会将其删除，例如：Live Example

pre

在段落下触发段落上的Onclick事件

1 个答案: