32.JS

122. 键盘事件

<script>
    window.onload = function () {
        /**
         * 键盘事件：
         *  onkeydown:
         *      - 按键被按下
         *      - 对于onkeydown来说，如果一直按着某个按键不放手，则事件会一直触发
         *      - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快，
         *      这种设计是为了误操作的发生。
         *  onkeyup:
         *      - 按键被松开
         *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
         */
        document.onkeydown = function (event) {
            /**
             * 可以通过keyCode来获取按键的编码
             * 通过它可以判断哪个按键被按下
             * 除了keyCode，事件对象中还提供了几个属性
             * altKey
             * ctrlKey
             * shiftKey
             * 这三个用来判断alt,ctrl和shift是否被按下，如果按下则返回true，否则返回false
             */
            if (event.keyCode == 89 && event.ctrlKey){
                console.log("Ctrl+ Y被按下");
            }
        }
        document.onkeyup = function () {
            console.log("键盘松开");
        }

        let input = document.getElementsByTagName('input')[0];
        input.onkeydown = function (event) {
            console.log('键盘被按下了');
            // 使文本框中不能输入数字
            if (event.keyCode >= 48 && event.keyCode <= 57) {
                // 在文本框中输入内容，属于onkeydown的默认行为
                // 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
                return false;
            }
        }
    };
</script>