在工作中在发现同事在写输入密码按键的相关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框
<div class="setpsw input">
<input type="password">
<input type="password">
<input type="password">
<input type="password">
<input type="password">
<input type="password">
</div>
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:;
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,'');
}
});
效果图