侦听网页按键事件 

<html>
<head>
    <title>keypress</title>

    <script type="text/javascript"> 
<!--

        document.defaultAction = true;

        function init() {
            var x = document.getElementById('testForm').getElementsByTagName('input');
            for (var i = 0; i < x.length; i++) {
                x[i].onclick = setEvents;
                if (x[i].checked)
                    x[i].onclick();
            }
            writeroot = document.getElementById('writeroot');
            document.getElementById('emptyWriteroot').onclick = function() {
                writeroot.innerHTML = '';
                return false;
            }
        }

        function setEvents() {
            if (this.id == 'default') {
                document.defaultAction = !this.checked;
                return;
            }
            var eventHandler = (this.checked) ? detectEvent : empty;
            document['on' + this.id] = eventHandler;
        }

        function detectEvent(e) {
            var evt = e || window.event;
            writeData(evt.type);
            writeData('keyCode is ' + evt.keyCode);
            writeData('charCode is ' + evt.charCode);
            writeData(evt.charCode);
            return document.defaultAction;
        }

        function empty() {
            // nothing
        }

        var writeroot;

        function writeData(msg) {
            writeroot.innerHTML += msg + '<br />';
        }
 
// -->
    </script>

    <style type="text/css">
        #writeroot
        {
            height: 300px;
            overflow: auto;
            border: 1px solid #2EB2DC;
        }
    </style>
</head>
<body>
    <form id="testForm">
    <input type="checkbox" id="keydown" />
    <label for="keydown">keydown</label><br />
    <input type="checkbox" id="keypress" />
    <label for="keypress">keypress</label><br />
    <input type="checkbox" id="keyup" />
    <label for="keyup">keyup</label><br />
    <input type="checkbox" id="default" />
    <label for="default">Suppress default action</label><br />
    <button id="emptyWriteroot">Remove messages</button>
    </form>
    <p id="writeroot">
    </p>
</body>
</html>

posted on 2010-12-14 22:47  沃叶徐  阅读(130)  评论(0)    收藏  举报

导航