jQuery 前的按键判断代码

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

赞 (0)

相关推荐

  • 基于jquery的禁用右键、文本选择功能、复制按键的实现代码

    同时适合IE.firefox.谷歌浏览器下适用,经过筛选代码如下: 复制代码 代码如下: //禁用右键.文本选择功能.复制按键$(document).bind("contextmenu",function(){return false;});$(document).bind("selectstart",function(){return false;});$(document).keydown(function(){return key(arguments[0])}

  • Jquery 监视按键，按下回车键触发某方法的实现代码

    Jquery 监视按键，按下回车键触发某方法的实现代码

    复制代码 代码如下: <script type="text/javascript">$(function () { $('input:text:first').focus(); //把焦点放在第一个文本框 var $inp = $('input'); //所有的input元素$inp.keypress(function (e) { //这里给function一个事件参数命名为e,叫event也行,随意的,e就是IE窗口发生的事件.    var key = e.which;

  • 基于Jquery实现键盘按键监听

    从NETTUTS看到的文章,效果很不错,有点类似于Flash做出来的效果,demo在这里 ,原文 对实现步骤讲得很清楚,我就不多提了,实现效果的逻辑比较简单,也就是slideDown()方法, jquery slideDown()方法,实现滑动效果. 复制代码 代码如下: // shows a given element and hides all others  function showViaKeypress(element_id)  {      $(".container").

  • jQuery 前的按键判断代码

    做web开发的时候,有时候需要根据键盘进行一些操作,例如按下Enter的时候提交表单,禁止用户输入某些特殊字符,设置快捷键等等.这时候需要找出用户按下的是那些按键,写个小程序来测试按键. 复制代码 代码如下: $(document).ready(function(){ var $down = $("#down"); var $press = $("#press"); var $up = $("#up"); $(document).keydown(

  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

  • html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥) <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; char

  • JQuery实现定时刷新功能代码

    在网页开发中,经常会需要不断的刷新某个页面或某个局部数据.这时候就需要用到定时刷新来实现了.实现方式就是使用JS setInterval函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新. 实现代码如下: <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ getData(); setIn

  • jQuery 表单验证扩展代码(一)

    jQuery 表单验证扩展代码(一)

    再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言. 一. 分析表单验证的基本情况 在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2). 输入参数中的范围校验 (3). 输入参数与另外一个控件值的比较 (4). 输入的参数正则表达式验证 二. 是否必填项验证 有如下几种情况: (1) 输入框获得焦点提示 (2)输入框失去焦点验证错误提示 (3)输入框失去焦点验证正确提示 首先确定

  • jQuery三级下拉列表导航菜单代码分享

    jQuery三级下拉列表导航菜单代码分享

    本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta

  • 通过jQuery学习js类型判断的技巧

    通过jQuery学习js类型判断的技巧

    1. isFunction中typeof的不靠谱 源码: var isFunction = function isFunction( obj ) { // Support: Chrome <=57, Firefox <=52 // In some browsers, typeof returns "function" for HTML <object> elements // (i.e., `typeof document.createElement( &quo

  • jQuery平滑旋转幻灯片特效代码分享

    jQuery平滑旋转幻灯片特效代码分享

    本文实例讲述了jQuery平滑旋转幻灯片特效.分享给大家供大家参考.具体如下: 这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼:图片大小和颜色自定义请修改jQuery-jcImgScroll.js. 运行效果图:               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. js关键代码: <script src="js/jQuery-1.7.1.j

  • jQuery实现区域打印功能代码详解

    使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

  • jQuery AJAX 调用WebService实现代码

    用jQuery调用其他项目的WebService 实现登录验证功能 html输入用户名密码: 代码 复制代码 代码如下: <table style="width: 400px"> <tr> <td style="width: 200px" class="left"> Login ID: </td> <td style="width: 200px" class="l

随机推荐