0

段落をクリックしたときに段落をテキストエリアタグに置き換えると、テキストエリアには段落にあったテキストが含まれている必要があります。

<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これは、 element内にp要素を配置できないため、ブラウザーが無効な DOM を修正しているためです。のコンテンツ モデルpはphrasing contentですが、phrasing content では有効ではなく、 flow contentpreでのみ有効です。

これを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使用してください。によく似ています: どちらも同じコンテンツ モデルを持ち、同じ場所で有効であり、両方ともデフォルトです。prepprepdisplay: block

別の方法として、行の折り返しなどを目的としていない場合は、最新のブラウザで を取り除き(のセマンティクスが適切でない場合は をpre保持するか、pまたは を使用します)、代わりにCSSプロパティ(例: ) を使用できます。 .divpwhite-spacewhite-space: pre

以下のコメントを再確認してください。

しかし、preタグ内のテキストをテキストエリアに表示することはできません

を に入れ、を DOMpreの必要な場所に入れ、を削除または非表示にするだけです。たとえば、これはそれを削除します: Live Examplecontents()textareatextareapre

$(".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 に答える