Jqueryが主要ブラウザに対応したEnterによる入力フォーカス切り替え方式を実現_jquery

プロジェクトに取り組んでいるときに、お客様は Enter キーで入力 (フォーカス) を直接切り替えることができ、最後の入力に到達したときに情報を直接送信できるようにしたいと要望しました。

最初のアイデアは、コードの一部をオンラインでコピーして直接使用することです。しかし、Baidu と Google で検索したところ、見つかったコードの 80% 以上が同じでした。一部のコードは古すぎるため使用できません。一部のブラウザーでのみ動作するものもあります。 30分ほど悩んだ後も、適切な解決策は見つかりませんでした。最後に考えたら、自分でやったほうがいいかもしれません。

1. アイデア

Enter をクリックするたびに、現在のフォーカス位置を取得し、次の要素を設定してフォーカスを取得します。

2. コード

<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 &#63; event.keyCode : event.which &#63; 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) &#63; -1 : i ;
        $('#'+ inputs[i+1].id ).focus()
        break;
      }
     }
   }
 }

</script>

このうち、IEとFirefoxではキー値の取得方法が異なるため、ブラウザ側で簡易判断を行っております。このようにして、各ブラウザでヒットしたキーの値を取得できます。

最後に、現在の値を取得した後、他のさまざまな条件を追加できます。

デモのアドレス: http://demo.jb51.net/js/2014/jsenterqiehuan/