》HTML5 全域屬性
這個屬性的設定將HTML元素所定義的區塊,轉換成為可編輯區域,考慮以下的配置:
其中 p 形成的區域因為指定了 contenteditable ,因此現在變成了可以編輯的區域,點擊以下的矩形文字內容,可以編輯其中的內容。
於<p>構成的可編輯區域中,輸入特定文句內容,按一下「顯示編輯內容」,使用者輸入
的文字內容即被取出,並且顯示在訊息方塊上。相關的設定如下:
以下為使用的 script 內容:
於 p 元素中,設定了 contenteditable 屬性,以支援文字編輯作業,而 showMsg() 函式於使用者按下「顯示編輯內容」按鈕時執行,其中顯示使用者於其中輸入的文字內容。同樣的,當 div 元素設定了contenteditable 屬性,整個 div 區塊會被轉換成為可編輯狀態,讀者可以自行嘗試看看。
》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 全域屬性
沒有留言:
張貼留言