jQuery 前的按键判断代码
jQuery 前的按键判断代码
发布时间:2016-12-30 来源:查字典编辑
摘要:做web开发的时候,有时候需要根据键盘进行一些操作,例如按下Enter的时候提交表单,禁止用户输入某些特殊字符,设置快捷键等等。这时候需要找...

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

复制代码 代码如下:

$(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。

实现代码如下:

复制代码 代码如下:

当前按键:<span id="msg"></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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类