jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部。键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上。在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点)。 1:keydown()事件是键盘点击时触发的第一个键盘事件,如果用户继续按住键位,keydown事件会持续进行。 复制代码 代码如下: $('input').keydown(function(event){ alert(event.keyCode); }); 通过键盘返回的值可以实现更多的关于这些元素的控制,比如说上下左右键,分别是:38,40,37,39 。 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 . 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,39 如果我们要实现ctrl+Enter就是ctrl+回车提交表单 复制代码 代码如下: $(document).keypress(function(e) { if (e.ctrlKey && e.which == 13) $("form").submit(); }) 其它参考信息: 预备知识 1.数字0键值48..数字9键值57 复制代码 代码如下: */ 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; } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |