1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)【jquery】

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

时间:2019-11-17 09:17:39

相关推荐

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

web前端|js教程

jQuery,键盘事件

web前端-js教程

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

pdf在线编辑源码,ubuntu常用的软件,爬虫字典传入数组,php推技术php新的技术,滑县seo方案lzw

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

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

仿桌面网站源码,ubuntu分区方案详解,网络爬虫 爬app,PHP电话正则,seo主题优化lzw

$(input).keydown(function(event){

alert(event.keyCode);

});

通过键盘返回的值可以实现更多的关于这些元素的控制,比如说上下左右键,分别是:38,40,37,39 。

2:keypress()事件和keydown是差不多的,只有一个例外,如果需要阻止按键的默认行为,你必须是哟就keypress事件。

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

云相册系统源码,vscode起项目报错,bcd 引导ubuntu,tomcat主导市场了吗,一个sqlite3样本,爬虫lis,PHP微信支付宝,seo营销代理推广引流,手机网站管理,discuz后台模板修改lzw

$(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;

},

/*===========================================================================

功能描述:判断是否是整数,限制编辑框只能输入数字

调用方法:

待解决问题:

firefox下tab键不起作用。

*/

isInt:function(e){

var keynum = this.getKeyNum(e);

if(keynum >= 48 && keynum <= 57 || keynum == 8){//firefox下退格需判断8

return true;

}

return false;

},

/*===========================================================================

功能描述:判断是否是小数,限制编辑框只能输入数字,只能输入一个小数点。

调用方法:

*/

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;

}

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。