jquery实现tab键进行选择后enter键触发click行为
更新时间:2017年03月29日 09:58:55 作者:cl296894988
本文主要介绍了jquery键盘事件实现tab键进行选择后enter键触发click行为的方法,这种使用场景为当首页有几个链接需要选择的时候,使用键盘就可以进行触发行为。下面跟着小编一起来看下吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
这种使用场景为当首页有几个链接需要选择的时候,使用键盘就可以进行触发行为
复制下来放本地用吧 网页上直接测试有问题
效果图:
下面是demo代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >9</ title > < script type = "text/javascript" src = "http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></ script > < style type = "text/css" > .active{ background: pink; } </ style > </ head > < body > < a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" onclick = "aa(111)" >111111111111111111</ a > < a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" onclick = "aa(2222)" >222222222222222222</ a > < a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" onclick = "aa(3333)" >333333333333333333333</ a > < a class = "active" href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" onclick = "aa(44444)" >4444444444444444444444</ a > <!-- <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >111111111111111</a> --> <!-- <script type="text/javascript"> $("body").on("click",function(){ var $active=$(".active"); var index=$active.index(); var totalLength=$("div").length; if (index==totalLength-1) { $($("div")[0]).addClass("active").siblings("div").removeClass("active"); }else{ $active.next().addClass("active").siblings("div").removeClass("active"); } }) </script> --> < script type = "text/javascript" > document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==9){ // console.log(9999); var $active=$(".active"); var index=$active.index(); var totalLength=$("a").length; if (index==totalLength-1) { $($("a")[0]).addClass("active").siblings("a").removeClass("active"); }else{ $active.next().addClass("active").siblings("a").removeClass("active"); } return false; } if(e && e.keyCode==13){ // enter 键 var $active=$(".active"); // var aa=$active.value; // $active.click(function(event) { // /* Act on the event */ // }); $active.trigger("click"); // console.log(aa); // console.log(9999); } }; </ script > <!-- <script type="text/javascript"> var $active=$(".active"); var aa=$active.value; console.log(aa); </script> --> < script type = "text/javascript" > function aa(ss){ alert(ss); } </ script > <!-- <script type="text/javascript"> var arr=[1,2,3]; var index = Math.floor((Math.random()*arr.length)); console.log(arr[index]); </script> --> </ body > </ html > |
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
- 按Enter键触发事件的jquery方法实现代码
- jquery实现按Enter键触发事件示例
- 基于jquery的button默认enter事件(回车事件)。
- jquery 按键盘上的enter事件
- jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
- 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
- 基于Jquery的实现回车键Enter切换焦点
- Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
- 基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
- jQuery响应enter键的实现思路
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
本篇文章主要介绍了Jquery EasyUI tree 的异步加载,可以实现遍历指定文件夹,根据文件夹内的文件生成tree,有兴趣的可以了解一下。2017-02-02
最新评论