标签:lin toolbar 相关 image jquer var doc img type
在工作中在发现同事在写输入密码按键的相关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: 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,‘‘); } });
标签:lin toolbar 相关 image jquer var doc img type
原文地址:http://www.cnblogs.com/libin-1/p/6209376.html