【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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



沒有留言: