HTML5 全域屬性－contenteditable

》HTML5 全域屬性

這個屬性的設定將HTML元素所定義的區塊，轉換成為可編輯區域，考慮以下的配置：

<p contenteditable>有一種愛情叫作遺憾</p>

其中 p 形成的區域因為指定了 contenteditable ，因此現在變成了可以編輯的區域，點擊以下的矩形文字內容，可以編輯其中的內容。

有一種愛情叫作遺憾

於<p>構成的可編輯區域中，輸入特定文句內容，按一下「顯示編輯內容」，使用者輸入
的文字內容即被取出，並且顯示在訊息方塊上。相關的設定如下：

<p id="msgp" contenteditable>有一種愛情叫作遺憾</p>

<button onclick="showMsg()">顯示編輯內容</button>

以下為使用的 script 內容：

<script>

        function showMsg() {

            alert(document.getElementById('msgp').innerHTML);

        }   

</script>

於 p 元素中，設定了 contenteditable 屬性，以支援文字編輯作業，而 showMsg() 函式於使用者按下「顯示編輯內容」按鈕時執行，其中顯示使用者於其中輸入的文字內容。同樣的，當 div 元素設定了contenteditable 屬性，整個 div 區塊會被轉換成為可編輯狀態，讀者可以自行嘗試看看。

》HTML5 全域屬性