將DIV轉換爲具有特定「名稱」屬性的textarea

Question

我有一個小型管理面板，我已經爲我的DayZ服務器執行簡單的數據庫任務。現在我想在我的網站上爲新聞報道做一個簡單的編輯。新聞簡報存儲在我的數據庫中的表格中。我想要的是，當頁面加載時，它只是簡單地回顯數據，看起來就像在現場一樣。然後，當我點擊它，我希望它轉換成：

<textarea name="edit><?php echo news; ?></textarea> 

這是我當前的代碼：

function divClicked() { 
    var divHtml = $(this).html(); 
    var editableText = $("<textarea name=&quot;edit&quot; />"); 
    editableText.val(divHtml); 
    $(this).replaceWith(editableText); 
    editableText.focus(); 
    // setup the blur event for this new textarea 
    editableText.blur(editableTextBlurred); 
} 

$(document).ready(function() { 
    $("#editable").click(divClicked); 
}); 

<form method="post" action="newsedit.php"> 
    <div id="editable"><?php echo $news; ?></div> 
    <input type="submit" value="Edit News" /> 
</form> 

現在，這確實在這個意義上的工作，當我點擊文本它確實轉換成了一個textarea。問題是，它並沒有給它的「編輯」的名字，所以當我打透過按鈕，這是因爲如果我沒有提交，並刪除所有數據移出表，因爲

<textarea name="edit"></textarea> 

在技術上是空。有沒有什麼辦法可以實現這一點，當我點擊文本時，它會將代碼轉換爲具有特定名稱的textarea，所以當我點擊提交時有實際的數據？

Answer 1

變化形式：

<form method="post" action="newsedit.php"> 
    <div id="<?php echo $newsID;?>"><?php echo nl2br($news); ?></div> 
    <input type="submit" value="Edit News" /> 
</form> 

其中$ NewSID的與$消息文本一起返回。

nl2br（$ news）將會確保換行符被確認。

Answer 2

var editableText = $("<textarea name='edit' />"); 

http://jsfiddle.net/H5aM4/檢查textarea的

Answer 3

試試這個

$("#editable").click(function(){ 

    $(this).replaceWith(function() { 
    return $("<textarea name='edit'>").text(this.innerHTML); 
}); 

}); 

Here is the working example