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 ,比較三者的差異。

沒有留言: