当前位置: 首页 > 编程笔记 >

jquery实现tab键进行选择后enter键触发click行为

慕凌
2023-03-14
本文向大家介绍jquery实现tab键进行选择后enter键触发click行为,包括了jquery实现tab键进行选择后enter键触发click行为的使用技巧和注意事项,需要的朋友参考一下

这种使用场景为当首页有几个链接需要选择的时候,使用键盘就可以进行触发行为

复制下来放本地用吧 网页上直接测试有问题

效果图:

下面是demo代码

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 问题内容: 我正在为我的数据库开发GUI设计。 在设计了大多数框架并对其进行调试之后,我释放了我需要使用 ENTER 键(而不是仅单击它)将选项添加到“触发”按钮。 我应该怎么做?我当前正在为按钮使用 MouseListener ,并希望添加一个在按下ENTER键时执行相同操作的Listener。谢谢 问题答案: 使用Enter键调用按钮的动作是LAF问题。Windows支持该功能,但是在默认的M

  • 问题内容: 我正在寻找一种创建表单的方法,按Enter键可使焦点移至页面上的“下一个”表单元素。我一直在网上找到的解决方案是… 不幸的是,这似乎仅在IE中有效。因此,这个问题的实质是,是否有人知道适用于FF和Chrome的解决方案?另外,我宁愿不必将 onkeydown 事件添加到表单元素本身,但是如果那是唯一的方法,则必须这样做。 编辑:另外,我已经看到人们提出了这样的问题,即这不是好样式,因为

  • 本文向大家介绍WinForm中变Enter键为Tab键实现焦点转移的方法,包括了WinForm中变Enter键为Tab键实现焦点转移的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了WinForm中变Enter键为Tab键实现焦点转移的方法,在进行C#应用程序开发时有一定的实用价值。分享给大家供大家参考。 具体实现代码如下: 希望本文所述变Enter键为Tab键的方法对大家C#程序设计

  • 问题内容: 我在项目中停留了2天,我无法实现如何使 ENTER KEY 像 TAB KEY一样工作 我尝试了 键侦听器, 但是ENTER KEY具有JTable的默认功能,因此它无法正常工作,而且它一直在下降。我在google上发现我需要使用 键绑定, 但是我无法实现它。 任何人都可以在JTable上给我完整的编码示例吗?请您帮忙。 提前致谢 问题答案: 基本的做法是使用键绑定API,该API在大

  • 问题内容: 模拟用户按下“输入”的最佳方法是什么?$(element).keypress()似乎不允许我传递实际按下的键。 这是用于单元测试。 问题答案:

  • 本文向大家介绍jquery实现回车键触发事件(实例讲解),包括了jquery实现回车键触发事件(实例讲解)的使用技巧和注意事项,需要的朋友参考一下 键盘事件有3: keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 。 正确代码为: 推荐:keyup,防止笔记本键盘不小心触摸到了 1.有些文档中有写成这样: XP系统IE6下是不成功的。 2.还有INPUT的 这种情况要