JavaScript获取键盘事件
JavaScript中:
onkeydown 事件会在用户按下一个键盘按键时发生。
onkeypress 事件会在键盘按键被按下并释放一个键时发生。
onkeyup 事件会在键盘按键被松开时发生。
支持该事件的 JavaScript 对象:document, image, link, textarea
浏览器差异:Internet Explorer 使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 使用 event.which。
jQuery中:
keydown事件会在键盘按下时触发。
keypress 事件会在键盘按键被按下并释放一个键时发生。
keyup事件会在按键释放时触发。
代码示例:
//js中写法
document.onkeydown=function(event){
var event = event || window.event;//浏览器兼容
var keyCode = event.keyCode || event.which;//浏览器兼容 if(keyCode == 13){ //绑定回车
document.getElementById("login").onclick; //自动触发登录按钮
} } //jQuery中写法
$(document).keydown(function(event){
var event = event || window.event;//浏览器兼容
var keyCode = event.keyCode || event.which;//浏览器兼容 if(keyCode == 13){ //绑定回车
$('#login').click(); //自动触发登录按钮
}
});
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、多媒体键的键码值

JavaScript获取键盘事件的更多相关文章
- javascript的键盘事件大全
javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...
- JavaScript 模拟键盘事件
JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...
- C/C++ 获取键盘事件
Windows 系统下的 vs 中可以使用 _kbhit() 函数来获取键盘事件,使用时需要加入 conio.h 头文件 #include <conio.h> #include <i ...
- js中获取键盘事件【转】
<script type="text/javascript" language=JavaScript charset="UTF-8"> 2 docu ...
- js中获取键盘事件
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
- JS获取键盘事件
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
- java获取键盘事件
转 <script type="text/javascript" language=JavaScript charset="UTF-8"> docu ...
- javascript之键盘事件
键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; ...
- Javascript鼠标键盘事件
鼠标事件click:单击dblclick:双击mousedown:鼠标按下mouseup:鼠标抬起mouseover:鼠标悬浮mouseout:鼠标离开mousemove:鼠标移动mouseenter ...
随机推荐
- The history of programming languages.(transshipment) + Personal understanding and prediction
To finish this week's homework that introduce the history of programming languages , I surf the inte ...
- Linux网络编程学习计划
由于网络编程是很重要的一块,自己这一块也比较欠缺,只知道一些皮毛,从今天开始系统学习<Linux网络编程>一书,全书分为十四个章节: 第一章 概论 P1-16 第二章 UNIX ...
- CentOS7下安装Gitlab社区版【安装步骤、IP改域名、修改端口】
这两天一直在给公司的服务器配置Gitlab(10.5.4).过程很是痛苦,所以把过程记录一下. 1.安装CentOS7 从官网上下载了最新版CentOS-7-x86_64-DVD-1708.iso.用 ...
- azkaban 执行hive语句
#hivef.jobtype=commandcommand=hive -f test.sql #test.sql use default;drop table aztest;create table ...
- angular分页插件tm.pagination二次触发问题解决歪方案
今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心 ...
- 算法练习LeetCode初级算法之树
二叉树的前序遍历 我的解法:利用递归,自底向下逐步添加到list,返回最终的前序遍历list class Solution { public List<Integer> preorderT ...
- 8.24 关于valid.js
这是昨天遇到的一个问题. js文件的validator函数里面套用了框架,但是页面上报错,说这不是一个函数..找了wd ht调都不知道怎么回事 后来jf哥说,是因为html页面没有引入valid.js ...
- layui超链接追加tab选项卡必须手动刷新才出现问题
在admin.js中tabAdd方法里 var li = $("#WeTabTip li[lay-id=" + id + "]").length;中的id外面加 ...
- 419. Battleships in a Board 棋盘上的战舰数量
[抄题]: Given an 2D board, count how many battleships are in it. The battleships are represented with ...
- [leetcode]50. Pow(x, n)求幂
Implement pow(x, n), which calculates x raised to the power n (xn). Example 1: Input: 2.00000, 10 Ou ...