键盘事件 java_[Java教程]jquery键盘事件总结

[Java教程]jquery键盘事件总结

0 2016-12-22 00:00:12

在工作中在发现同事在写输入密码按键的相关js效果时，发现自己对于这块很是不了解，这几天特地了解了一下，进行以下总结:

一、首先要知道键盘事件的几个属性:

1、keydown()：在键盘按下时触发。

2、keyup()：是按下键盘起来后的事件。

3、keypress()：在敲击按键时触发，我们可以理解为按下并抬起同一个按键。

二、获得键盘上对应的 ascII 码：//键码获取$(document).keydown(function (event) { alert(event.keyCode);});

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

三、案例1：

比如：小说网站中常见的按左右键来实现上一篇文章和下一篇文章；

按 ctrl+enter 实现表单提交(以此提高用户体验)；

如果我们要实现 ctrl+enter 提交表单，可以这样：//键盘操作$(document).keydown(function (event) { if (event.ctrlKey && event.keyCode == 13) { alert('Ctrl+Enter'); }; switch (event.keyCode) { case 37: alert('方向键-左'); break; case 39: alert('方向键-右'); break; }; return false;});

四、案例2：

1、html结构：4个input框

2、css结构.setpsw { margin: 0 auto; height: 50px; overflow: hidden; display: inline-block;}.setpsw input { width: 30px; height: 30px; padding: 0 0; float: left; margin: 5px; text-align: center; line-height: 21px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; outline: 0; background-color: #fff;}

3、js效果$(".input input").keyup(function(event){

var e = (event) ? event : window.event;

if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)){　　　　var value = $(this).val();　　　　var length = value.length;　　　　var val;　　　　if(length>0.5){　　　　　　val = value.substring(length-1,length);　　　　　　$(this).val(val).next().focus()　　　　}　　}else if(e.keyCode == 8){　　　　$(this).prev().focus()　　} else {　　　　 var _val = this.value;　　　　 this.value = _val.replace(/\D/g,'');　　}});

效果图

本文网址：http://www.shaoqun.com/a/273445.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0