ホームページ > ウェブフロントエンド > jsチュートリアル > Jqueryが主要ブラウザに対応したEnterによる入力フォーカス切り替え方式を実現_jquery

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

WBOY
リリース: 2016-05-16 16:38:19
オリジナル
1290 人が閲覧しました

プロジェクトに取り組んでいるときに、お客様は 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/

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート