• 默认事件、键盘事件


    事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情
    怎么阻止:当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用 return false;


    <script>
    //onkeydown : 当键盘按键按下的时候触发  提交的是按下此键之前的那些字母,不包括此键
    //onkeyup : 当键盘按键抬起的时候触发  提交的是包括此键在内的字母
    /*
    
    
    event.keyCode : 数字类型 键盘按键的值 键值
        ctrlKey,shiftKey,altKey 布尔值
        当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false
    */
    
    document.onkeydown = function(ev) {
        
        var ev = ev || event;
        alert(ev.keyCode);
        
    }
    
    //oncontextmenu : 右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发
    
    document.oncontextmenu = function() {
        
        //alert(1)
        
        return false;
        
    }
    </script>

    Ctrl + 回车 提交留言案例:

    <
    script> window.onload = function() { var oText = document.getElementById('text1'); var oUl = document.getElementById('ul1'); oText.onkeyup = function(ev) { var ev = ev || event; if ( this.value != '' ) { if (ev.keyCode == 13 && ev.ctrlKey) {  //判断是否同时按下了Ctrl+回车; var oLi = document.createElement('li'); oLi.innerHTML = this.value; if ( oUl.children[0] ) { oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } } } } }
     
    方向键控制Div移动案例:


     <
    script> //不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件 //onkeydown : 如果按下不抬起,那么会连续触发
         //常用的键码:13【回车】   8【Backspace】    48【0】    57【9】  32【空格】    65【A】
                37【左】    38【上】   39【右】  40【下】
         //使用定时器来解决键盘延迟的问题。

    window.onload = function () { var oDiv = document.getElementsByTagName('div')[0]; var right,left,top,bottom = false; setInterval(function() { if (right) { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; } else if (left) { oDiv.style.left = oDiv.offsetLeft - 10 + 'px'; } else if (top) { oDiv.style.top = oDiv.offsetTop - 10 + 'px'; } else if (bottom) { oDiv.style.top = oDiv.offsetTop + 10 + 'px'; } },50); document.onkeydown = function (evt) { var oEvent = evt || event; switch(oEvent.keyCode) { case 37: left = true; break; case 38: top = true; break; case 39: right = true; break; case 40: bottom = true; break; } }; document.onkeyup = function (evt) { var oEvent = evt || event; switch(oEvent.keyCode) { case 37: left = false; break; case 38: top = false; break; case 39: right = false; break; case 40: bottom = false; break; } }; }; </script>
    <body>
        <input type="text">
    </body>
    
    <script>
    window.onload = function()
     {
    
        var oInput = document.getElementsByTagName('input')[0];
        oInput.onkeydown = function(){
            var ev = ev ||event;
      
            //阻止除字母、backspace、左右键以外的按键事件
            if(ev.keyCode < 65 || ev.keyCode > 90){
                if(ev.keyCode != 8 && ev.keyCode != 37 && ev.keyCode != 39){
                    return false;
                }
            }
        }
    
    }
    
    </script>
    </head> 
  • 相关阅读:
    YII框架学习(二)
    YII框架学习(一)
    valid number 判断字符串是否为有效数字
    leetcode Add Binary
    leetcode Minimum Path Sum
    leetcode Unique Paths II
    leetcode[61] Unique Paths
    leetcode[60] Rotate List
    leetcode Permutation Sequence
    leetcode Spiral Matrix II
  • 原文地址:https://www.cnblogs.com/chiangyibo/p/6686091.html
Copyright © 2020-2023  润新知