onclick事件下段

我至極，以取代一個textarea標籤上的段落時，點擊一個段落觸發，文本區域應包含在該段文字：onclick事件下段

<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的出現，是空的。謝謝你的幫助

來源

2013-10-10 Tarik Mokafih

此外，您的jquery選擇試圖選擇一個ID，但在你的HTML它是一個類。 – rescuecreative

但是，如果我不把pre標籤，文本回聲將不會被格式化（寫在同一行），這不是我想要的 –

這是因爲你不能把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的contents()進入textarea，將textarea放在您想要的DOM的位置，然後移除或隱藏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-10 13:11:50

但是，如果我不把pre標籤，文字回顯將不會格式化（寫在同一行），這不是我想要的。你應該怎麼做才能保留pre標籤，用div標籤重新標記p標籤？ –

@TarikMokafih :(查看答案的更新。） –

酷了它的工作，但我不能讓文本里面的預標籤顯示在textarea上，你可以幫忙嗎？ –

onclick事件下段

回答

相關問題