《HTML5 開發執行個體大全》——1.29 編輯修改網頁中的文字

本節書摘來自異步社群《html5 開發執行個體大全》一書中的第1章，第1.29節,作者： 張明星 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

https://yqfile.alicdn.com/9676c986b3f446dafbe27c46ae0647741ced8299.png" >

執行個體說明

在html 5 中，使用屬性“contenteditable”可以直接編輯顯示在頁面中的文字，該屬性的取值為布爾型“true”或“false”。如果在元素中将該屬性的值設定為“true”，那麼就可以對該元素顯示的文本内容直接進行編輯了。

在本執行個體中，分别建立了兩個< article >内容元素。第一個元素将“contenteditable”屬性設定為“true”，用于直接内容的編輯；第二個< article >元素儲存編輯後的内容。當使用者編輯完成後，單擊“儲存”按鈕，則将編輯後的内容顯示在第二個< article >元素中。

具體實作

使用dreamweaver建立一個名為“029.html”的檔案，具體代碼如下所示：

在上述javascript代碼中，自定義了一個在單擊“儲存”按鈕時調用的函數btn_click()。在該函數中，為了擷取編輯後的内容，先将修改完成的内容儲存至變量“strart”中，然後通過元素id号擷取用于顯示結果的< article >元素，并将該元素顯示的内容設定為變量“strart”的值。執行後的初始效果如圖1-49所示，修改這段文字，然後單擊“儲存”按鈕後發現成功修改了這段文字，如圖1-50所示。

https://yqfile.alicdn.com/f4d9f2080855685014e3e3255c3ed7db07e6f80b.png" >

注意

在html 5中，大部分顯示文本内容的元素都支援“contenteditable”屬性，這給頁面中使用者的互動體驗帶來了極大的友善。到作者編寫本書時為止，暫無相關的api對編輯後的内容進行直接儲存；如果需要儲存，隻能借助于ajax或jquery中的異步操作來更新對應的背景資料。