使用HTML5，如何在表單提交中使用contenteditable字段？

所以我有一堆從數據庫動態填充的段落元素。我讓這些元素令人滿意。我現在想通過標準表單提交將編輯提交回數據庫。有沒有辦法發佈contenteditable元素回來？使用HTML5，如何在表單提交中使用contenteditable字段？

2011-06-06 MFB

你必須使用JavaScript的一種方式或其他，因爲它會用一個文本或像它不會作爲「標準」的表單元素的工作。如果你喜歡，你可以在你的表單中創建一個隱藏的textarea，並在表單的onsubmit函數中將contenteditable的innerHTML複製到textarea的值。或者，您可以使用ajax/xmlHttpRqeuest更手動地提交這些東西。

function copyContent() { 
    document.getElementById("hiddenTextarea").value = 
     document.getElementById("myContentEditable").innerHTML; 
    return true; 
} 


<form action='whatever' onsubmit='return copyContent()'>...

來源

2011-06-06 04:34:49 rob

看來最好使用'innerText'，否則你會把所有不可見的標記放到textarea中。 – 2017-03-10 19:24:41

就是這一點。你需要所有的標記，爲什麼你會使用contentEditable？記住textarea是隱藏的，它只是用來保存內容發送到服務器之前。 – rob 2017-03-10 23:00:13

如果使用jQuery的，你可以用。點擊（）事件中使用所提交的內容（即「保存」或「提交」 ...）

在你點擊功能將其發佈到服務器端腳本一個ajax「post」將它插入到你的數據庫中。

Example

來源

2011-06-06 04:29:22 Sparkup

您的鏈接已死亡。如果你能以某種方式挽回該鏈接後面的內容並在你的文章中進行編輯，那就太棒了。如果沒有，請刪除鏈接並編輯您的答案。 – rene 2016-06-11 08:30:30

是否需要進行標準格式提交？如果你不能或不想使用帶有輸入的表單，你可以嘗試AJAX（XMLHttpRequest + FormData），通過它你可以執行異步請求並更好地控制響應的顯示方式。

如果你想要它更簡單，試試jQuery的$.ajax函數（也$.get和$.post）。它使用簡單的JS對象發送數據。

來源

2017-10-10 20:16:56

使用FormData的XHR示例：https：//developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects – 2017-10-10 20:19:50

使用HTML5，如何在表單提交中使用contenteditable字段？

回答

相關問題