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 全域屬性



沒有留言: