×

用jQuery判断键盘按键的操作

作者:jiang2018.04.09来源:Web前端之家浏览:16780评论:0
关键词:JQueryJS

  做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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1487952000904.html

网友评论文明上网理性发言 已有0人参与

发表评论: