jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)


Posted in Javascript onMay 11, 2014

键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部。键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上。在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点)。

    键盘事件可以传递一个参数event,其实所有的jQuery事件都可以传递这么一个参数,这个event是一个对象,其包括一些属性,在触发事件的时候可以通过event来获得一些关于事件的值,比如在使用键盘的时候可以使用event.keyCode来获得所按下键的ASCII码的值。见下文

1:keydown()事件是键盘点击时触发的第一个键盘事件,如果用户继续按住键位,keydown事件会持续进行。

      $('input').keydown(function(event){
        alert(event.keyCode);
        });

      通过键盘返回的值可以实现更多的关于这些元素的控制,比如说上下左右键,分别是:38,40,37,39 。
2:keypress()事件和keydown是差不多的,只有一个例外,如果需要阻止按键的默认行为,你必须是哟就keypress事件。

3:keyup()事件是最后一个发生的事件(在keydown事件之后),不想keydown事件,该事件在松开键盘是仅触发一次(因为松开键盘并不是一个持续的状态)。

      $('input').keyup(funciton(){
          alert('keyup function is running!!');
        });

4:在jQuery中keydown,keypress,keyup事件是按一定的顺序执行的。

        $('input').keyup(function(){
          console.log('keyup');
          });
        $('input').keydown(function(){
          console.log('keydown');
          });
        $('input').keypress(function(){
          console.log('keypress');
          });

      执行结果是:keydown ,keypress ,keyup .
      在这里不使用alert是因为在alert的时候会阻止一些事件的发生,在这里是会阻止keyup事件的发生,要想实验这端代码,可以在Firefox下进行,需要在浏览器上装上firebug这个插件。放心安装,因为Firefox是一款开源的浏览器。相信开源软件。

jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是:

keydown();
keyup();
keypress();

keydown()

keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件.

keyup()

keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

keypress()

keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

 我们怎么才能获取我按下的是A还是Z还是回车按钮呢?

键盘事件可以传递一个参数event,其实说有的jQuery事件函数中都可以传递这么一个参数

$('input').keydown(function(event){
alert(event.keyCode);
});

上面代码中的,event.keyCode就可以帮助我们获取到我们按下了什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39

如果我们要实现ctrl+Enter就是ctrl+回车提交表单

$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})

其它参考信息:

预备知识

1.数字0键值48..数字9键值57
2.a键值97..z键值122;A键值65..Z键值90
3.+键值43;-键值45;.键值46;退格8;tab键值9;
4.event在ie中是全局的,在firefox是临时对象,需要传递参数

*/ 
jQuery.extend({ 
/*=========================================================================== 
功能描述:取得按键的值 
调用方法: 
jQuery.getKeyNum(event); 
*/ 
getKeyNum:function(e){ 
var keynum; 
if(window.event){ // IE 
keynum = event.keyCode; 
} 
else if(e.which){ // Netscape/Firefox/Opera 
keynum = e.which; 
} 
return keynum; 
}, 
/*=========================================================================== 
功能描述:判断是否是整数,限制编辑框只能输入数字 
调用方法: 
<input type="text" onkeypress="return jQuery.isInt(event);" /> 
待解决问题: 
firefox下tab键不起作用。 
*/ 
isInt:function(e){ 
var keynum = this.getKeyNum(e); 
if(keynum >= 48 && keynum <= 57 || keynum == 8){//firefox下退格需判断8 
return true; 
} 
return false; 
}, 
/*=========================================================================== 
功能描述:判断是否是小数,限制编辑框只能输入数字,只能输入一个小数点。 
调用方法: 
<input type="text" onkeypress="return jQuery.isFloat(this,event);" /> 
*/ 
isFloat:function(txt,e){ 
var keynum = this.getKeyNum(e); 
if(keynum == 46){//输入小数点 
if(txt.value.length == 0){ 
return false; 
}else if(txt.value.indexOf('.') >= 0){ 
return false; 
}else{ 
return true; 
} 
} 
if(this.isInt(e)){ 
return true; 
} 
return false; 
} 
});
Javascript 相关文章推荐
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
jquery 按键盘上的enter事件
May 11 #Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 #Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 #Javascript
基于Jquery实现键盘按键监听
May 11 #Javascript
js判断游览器类型及版本号的代码
May 11 #Javascript
jquery实现文本框数量加减功能的例子分享
May 10 #Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 #Javascript
You might like
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
ParseInt函数参数设置介绍
2014/01/02 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
Python实现堆排序的方法详解
2016/05/03 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
Python对切片命名的实现方法
2018/10/16 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
django-初始配置(纯手写)详解
2019/07/30 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
订货会主持词
2015/07/01 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python实现byte转integer
2021/06/03 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python