jQuery 前的按键判断代码

2016-02-19 13:45 2 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享jQuery 前的按键判断代码吧。

【 tulaoshi.com - Web开发 】

做web开发的时候,有时候需要根据键盘进行一些操作,例如按下Enter的时候提交表单,禁止用户输入某些特殊字符,设置快捷键等等。这时候需要找出用户按下的是那些按键,写个小程序来测试按键。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$(document).ready(function(){
var $down = $("#down");
var $press = $("#press");
var $up = $("#up");
$(document).keydown(function(event){
$down.append(String.fromCharCode(event.keyCode) + " ");
if (event.ctrlKey) {
alert("ctrl");
}
}).keyup(function(event){
$up.append(String.fromCharCode(event.keyCode) + " ");
}).keypress(function(event){
$press.append(String.fromCharCode(event.keyCode) + " ");
});
});

方法是触发down时,把keyCode push到数组里,并删除重复元素;触发up时,用$.grep从数组中删除该keyCode。
在任意时刻,这个数组里都保存了当前所按的按键,并且顺序是根据按键顺序排列的。
用jQuery判断当前所按的按键
方法就是用一个外部的数组保存当前按键。
在触发keydown时,把keyCode push到数组里,并删除重复元素;触发keyup时,用$.grep从数组中删除该keyCode。

实现代码如下:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
当前按键:span/span
script type="text/javascript"
Array.prototype.unique = function () { //这个是删除重复元素用的,可惜$.unique只能处理DOM数组。
var o = {};
for (var i = 0, j = 0; i this.length; ++i) {
if (o[this[i]] === undefined) {
o[this[i]] = j++;
}
}
this.length = 0;
for (var key in o) {
this[o[key]] = key;
}
return this;
};
var $msg = $('#msg');
var keys = [];
$(document).keydown(function(event){
keys.push(event.keyCode);
keys.unique();
$msg.html(keys.join(' '));
}).keyup(function(event){
keys.push(event.keyCode);
keys = $.grep(keys, function (n) {return n != event.keyCode;});
$msg.html(keys.join(' '));
});
/script

来源:https://www.tulaoshi.com/n/20160219/1605128.html

延伸阅读
标签: Web开发
jQuery另一个很令人惬意的地方是,一般的代码都是一行一行写,jQuery的代码可以一串一串写。 这一点,在前面的文章中已经介绍过了。 直接来一个Demo: Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0&nbs...
标签: Web开发
1、按钮倒数10秒之后才能点击。这个效果一般在一些论坛注册时候用到比较多,废话少说,直接上代码: 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title/title script type="text/javascript...
标签: Web开发
1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据 2.jquery简单的dom操作 3.送本jquery的开发手册给大家(大家慢慢去研究) 准备工作: 首先,我们新建个网站(.net2.0就行). 1.在我们的项目中jquery的js文件。 2.新建一个htm文件,命名为dome.htm吧。 代码如下:(head区的js代码就是实现的全部代码,有详细注释) 代...
标签: Web开发
有两个变量 a 和 b  如果a=1,3,5,7,9 则b="奇数" 如果a=2,4,6,8  则b="偶数" 如果a="0" 则b="零" [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: PHP
  //判断ICQ是否在线的代码   <?    function get_status($uin) {        $fp = fsockopen ("wwp.icq.com", 80, &$errno, &$errstr, 30);        if(!$fp)     {     ...

经验教程

397

收藏

27
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部