👷 ↗️ ✋🏾 矢印ナビゲーション、Javascript 🚙 🖐🏼 🕤

友人のスターフェイクが彼の投稿を投稿するように頼みました。最近、彼は不注意なコメントを残しましたが、コミュニティから厳しく罰せられました:)投稿が気に入った場合、または有用だと思われる場合は、カルマを上げてください。

むかしむかし、Lebedevsky technogretの矢印を使ったナビゲーションに関する投稿を読んだ後、私は自分の（別の）プロジェクトのフォーラムで同じことをすることにしました。

すぐに言ってやった。矢印ナビゲーションは機能しましたが、これにはとても満足していましたが、しばらくすると小さなバグが発生しました。レコードの編集中にテキストフィールドを使用すると、Ctrlで単語を切り替える代わりに、次または前のページに遷移します（およびレコードを削除します）。私は数回詐欺され、スクリプトは削除されました。

最近、仕事に何の関係もないので、フォームに焦点を当てて書き直すことにしました。

var focusStatus = null; 
      

        
        
        
      

     var focusedElement = null; 
      

        
        
        
      

     
      

        
        
        
      

     $(document).ready(function() { 
      

        
        
        
      

     $("textarea, input[type*='text'], input[type*='password']").focus(function() { 
      

        
        
        
      

     focusStatus = 1; 
      

        
        
        
      

     focusedElement = this.id; 
      

        
        
        
      

     $("#text").text("focusStatus = " + focusStatus + ", focusedElement = " + focusedElement + "\n"); //       
      

        
        
        
      

     }); 
      

        
        
        
      

     $("textarea, input[type*='text'], input[type*='password']").blur(function() { 
      

        
        
        
      

     focusStatus = null; 
      

        
        
        
      

     focusedElement = null; 
      

        
        
        
      

     $("#text").text("focusStatus = " + focusStatus + ", focusedElement = " + focusedElement + "\n"); //       
      

        
        
        
      

     }); 
      

        
        
        
      

     $(document).keydown(function(event) { 
      

        
        
        
      

     if (event.ctrlKey && !focusStatus) { 
      

        
        
        
      

     var link = null; 
      

        
        
        
      

     var href = null; 
      

        
        
        
      

     switch (event.keyCode? event.keyCode: event.which? event.which: null) { 
      

        
        
        
      

     case 0x25: 
      

        
        
        
      

     link = $("#prev").attr("href"); 
      

        
        
        
      

     break; 
      

        
        
        
      

     case 0x27: 
      

        
        
        
      

     link = $("#next").attr("href"); 
      

        
        
        
      

     break; 
      

        
        
        
      

     } 
      

        
        
        
      

     if (link) document.location = link; 
      

        
        
        
      

     } 
      

        
        
        
      

     }); 
      

        
        
        
      

     });

高速化のために、jQueryを使用して作成しました。残念ながら、私はjQueryをあまりよく知らないので、改善のためのコメントと提案に感謝します（確かにもっと美しくすることができます）。

元のLebedevバージョンと異なる点は次のとおりです。

focusStatus変数の存在（Ctrlキーを押してその存在を確認します）、focusedElement（念のために残しておきます）。

残念ながら、JSでは、どの焦点に焦点が当てられているかを知ることはできないのでしょう（？）。したがって、2つの関数focus（）とblur（）が、私の意見で重要な要素（テキストフィールドと入力（テキストとパスワード））に追加されました。 blur（）nullの変数1の値にフォーカスがあります。

矢印ナビゲーションは、focusStatus変数がそうでない場合にのみ実行されます。

ちなみに、検索フィールドにいるときにナビゲーションが機能するため、Habréでもそのようなものを入力できます。

更新しました。 残念ながら、ここではインデントがコード内を飛びます。そのため、ここにコードを配置します。

Upd＃2 ここで使用される maxic の実装とプラグイン。

UPD＃3 セラフの jQueryなしのオプション

矢印ナビゲーション、Javascript

More articles: