jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况，不管在文本输入区域内部还是外部。键盘事件在不同的浏览器中作用的范围是不一样的，通常这种键盘事件可以作用于 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;
}
});
相关文章
瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。2016-01-01
JQuery判断正整数整理小结(jQuery 文本框中只能输入正整数)
这篇文章主要介绍了JQuery判断正整数，附上详细的代码供大家查看具体的方法,需要的朋友可以参考下2017-08-08
这篇文章主要为大家介绍了jQuery的拷贝对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了jquery实现图片左右切换的方法,设计jQuery操作页面元素及对应样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jquery日历插件datepicker用法,结合实例形式分析了jquery日历插件datepicker的定义与使用技巧,需要的朋友可以参考下2016-01-01
jQuery 解析xml文件实现脚本代码，用到了jquery如何解析xml文件，和大家分享一下2009-08-08
这篇文章主要介绍了jQuery异步获取json数据方法的2种方式，并附上了示例，推荐给有需要的小伙伴。2014-12-12
基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）
这篇文章主要介绍了基于jquery实现图片相关操作，包括图片重绘、图片获取尺寸、图片调整大小、图片缩放，感兴趣的小伙伴们可以参考一下2015-12-12
凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.2010-03-03
Jquery 操作页面中iframe自动跟随窗口大小变化，而不出现滚动条，只在iframe内部出滚动条2010-02-02
最新评论