按钮盘上的enter事件

做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息。

接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE7,
IE8, Firefox 3, Chrome 2 和 Safari 4测试通过。
使用的开发工具是微软VS2010+Jquery框架

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

第一想法就是,网上去copy一段代码直接用。但了百度、谷歌找了个遍,找到的代码80%以上都是一样的。有的代码太老,都不能用。有的只有部分浏览器能用。折腾了半小时也没个合适的办法。最后一想,干脆自己动手。

实现步骤如下

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

一、思路

1、首先引用Jquery类库

效果图:

  每次点击回车的时候,获取当前的焦点位置,然后设置它的下一个元素获取焦点;

<script src=”Scripts/jquery-1.4.1.min.js”
type=”text/javascript”></script>

图片 1

二、代码

2、Javascript代码

下面是demo代码

<script type="text/javascript">
 $('input:text:first').focus(); 
 document.onkeydown = function enterHandler(event)
 {
   var inputs = $("input");           //可自行添加其它过滤条件   
   var browser = navigator.appName ;      //浏览器名称
   var userAgent = navigator.userAgent;     //取得浏览器的userAgent字符串 

   var Code = '' ;
   if(browser.indexOf('Internet')>-1)      // IE  
    Code = window.event.keyCode ;
   else if(userAgent.indexOf("Firefox")>-1)   // 火狐
    Code = event.which;
   else                     // 其它
     Code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

   if (Code == 13)               //可以自行加其它过滤条件
   {
     for(var i=0;i<inputs.length;i++)
     {
      if(inputs[i].id == document.activeElement.id)
      {  
        i = i== (inputs.length - 1) ? -1 : i ;
        $('#'+ inputs[i+1].id ).focus()
        break;
      }
     }
   }
 }

</script>

复制代码 代码如下:

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

 其中,因为IE和火狐对键值获取的不同,所以对浏览器做了简单的判断区分。这样就可以在各个浏览器上获取敲击的键值。

<script type=”text/javascript”>
        $(function () {
        $(‘input:text:first’).focus();
        var $inp = $(‘input:text’);
        $inp.bind(‘keydown’, function (e) {
            var key = e.which;
            if (key == 13) {
                e.preventDefault();
                var nxtIdx = $inp.index(this) + 1;
                $(“:input:text:eq(” + nxtIdx + “)”).focus();
            }
        });
    });
    </script>

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

最后,获取到当前的值以后,就可以加其它的各种条件了。

分析:
$(‘input:text:first’).focus();

您可能感兴趣的文章:

  • 按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键的实现思路

演示地址:

页面初始化时,焦点定位第一个文本框内

您可能感兴趣的文章:

  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
  • jQuery ctrl+Enter
    shift+Enter实现代码
  • jQuery响应enter键的实现思路
  • jQuery自动添加表单项的方法
  • jquery实现表单验证并阻止非法提交
  • jquery实现Ctrl+Enter提交表单的方法

var $inp = $(‘input:text’);

取的type=文本框的元素集合

$inp.bind(‘keydown’, function (e) {}

给文本框集合绑定‘keydown’事件

var key = e.which;

取的当前按下的键值 比如Enter的键值=13

e.preventDefault();

可以阻止它的默认行为的发生而发生其他的事情,在这里我们组织PostBack发生,而是切换焦点。另外一个相近的方法是stopPropagation,它起到阻止js事件冒泡的作用。

您可能感兴趣的文章:

  • 按Enter键触发事件的jquery方法实现代码
  • jquery实现按Enter键触发事件示例
  • 基于jquery的button默认enter事件(回车事件)。
  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
  • 修改jQuery.Autocomplete插件 支持中文输入法
    避免TAB、ENTER键失效、导致表单提交
  • 基于Jquery的实现回车键Enter切换焦点
  • Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
  • 基于Jquery的回车成tab焦点切换效果代码(Enter To Tab
    )
  • jQuery响应enter键的实现思路
  • jquery实现tab键进行选择后enter键触发click行为

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注