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

HTML5 的互動支援 - input 事件

HTML5 針對使用者操作介面的互動支援,進行了部份的強化,包含鍵盤的 input 事件,滑鼠的滾輪事件以及拖曳/置放作業,這些功能在接下來的幾篇文章中作簡要的介紹。

HTML5 支援使用者的鍵盤 input 事件,這對於精確捕捉使用者的鍵盤輸入操作有很大的幫助,不同於 keydown 或是 keyup ,input 於使用者完成一次性的完整輸入之後被觸發,考慮以下的網頁程式:

<!DOCTYPE html>
<html >
<head>
    <title>onkeyup onkeydown oninput</title>
 
    <script>
        window.onload = function () {
            var msg = document.getElementById('message');
            msg.oninput = function () {
                document.getElementById('result').innerHTML = this.value;
            }
        }
    </script>
</head>
<body>
    <input id="message" type="text" style=" width:400px;" />
    <div id="result" style="color:Maroon; font-size:24pt;" ></div>
</body>
</html>

其中在網頁完成載入之後,註冊了畫面上 input 文字控制項的 input 事件,每一次當使用者輸入或調整文字方塊的內容,則在下方即時顯示目前的文字內容。


在 HTML5 之前,由於僅支援 keydown 與 keyup ,當使用者按住按鍵不放,或是嘗試時擷取整個文字塊的內容,會產生內容的落差,讀者可以自行嘗試將 oninput 改成 keydown 與 keyup ,比較三者的差異。

沒有留言: