zoukankan      html  css  js  c++  java
  • JavaScript获取键盘事件

    JavaScript中:

    onkeydown 事件会在用户按下一个键盘按键时发生。

    onkeypress 事件会在键盘按键被按下并释放一个键时发生。

    onkeyup 事件会在键盘按键被松开时发生。

    支持该事件的 JavaScript 对象:document, image, link, textarea

    浏览器差异:Internet Explorer 使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 使用 event.which。

    jQuery中:

    keydown事件会在键盘按下时触发。

    keypress 事件会在键盘按键被按下并释放一个键时发生。

    keyup事件会在按键释放时触发。

    代码示例:

     1 //js中写法
     2 document.onkeydown=function(event){
     3     var event = event || window.event;//浏览器兼容
     4     var keyCode = event.keyCode || event.which;//浏览器兼容
     5 
     6     if(keyCode == 13){ //绑定回车 
     7         document.getElementById("login").onclick; //自动触发登录按钮 
     8     } 
     9 
    10 }
    11 
    12 //jQuery中写法
    13 $(document).keydown(function(event){ 
    14     var event = event || window.event;//浏览器兼容
    15     var keyCode = event.keyCode || event.which;//浏览器兼容
    16 
    17     if(keyCode == 13){ //绑定回车 
    18         $('#login').click(); //自动触发登录按钮 
    19     } 
    20 });

    onkeyup的缺陷处理

    <input type="text" onkeyup='this.value=this.value.replace(/[^w_]/g,"");'/>

    input框只能输入数字,但是该方法有个缺陷,当用户输入数字后想修改时,键盘的←键无法使光标向左移动,即便鼠标点击,使光标到指定位置,在按下键盘任意键修改时,光标还是会跑到最右端。

    <input type="text"  onkeyup='if(event.keyCode!=8 && event.keyCode!=37 && event.keyCode!=16 && event.keyCode!=20 && event.keyCode!=39 && (event.keyCode<48 || event.keyCode>105) && (!event.shiftKey && event.keyCode != 189))this.value=this.value.replace(/[^w_]/g,"");'/>

    event.keyCode后边的数字代表的是键盘对应的按键,可以查看下边的keyCode对照表。上边代码中是按下键盘上数字按键,Backspace按键,←,→按键时,不作正则处理,从而避免了第一段代码的问题。

    keyCode对照表

    1、 字母和数字键的键码值

    2、数字键盘上的键的键码值

    3、功能键的键码值

    4、控制键的键码值

    5、多媒体键的键码值

  • 相关阅读:
    ES6关于Promise的用法
    JS进阶篇--JS数组reduce()方法详解及高级技巧
    JavaScript常用数组操作方法,包含ES6方法
    揭密 Vue 的双向绑定
    JavaScript(E5,6) 正则学习总结学习,可看可不看!
    利用scons构建project
    cuda核函数再调用核函数,多层并行
    使用微信JSSDK实现图片上传
    android 自己定义水平和圆形progressbar 仅仅定义一些style就能够
    [LeetCode] 035. Search Insert Position (Medium) (C++)
  • 原文地址:https://www.cnblogs.com/wbxk/p/6678971.html
Copyright © 2011-2022 走看看