jqueryを使用して次にフォーカス可能な要素を見つけますか？

私のテキストボックスには、ユーザーがEnterキーを押すたびに、それらがフォーカスされている限り、次に近い要素（入力、チェックボックス、ボタン、ラジオ、選択、a、div）にフォーカスする機能があります。 jqueryを使ってどうすればいいですか？jqueryを使用して次にフォーカス可能な要素を見つけますか？

出典

2013-01-02 sadcat

何を試しましたか？ところで、「近い」を定義してください。オハイオ州、もう一つのことは、ユーザーを教え、たぶん自分自身もTABキーを使用することです。 – gdoron

ブラウザはすでにTABキーを押しています。 Enterはまた別の意味を持っています...なぜそれを覆したいのですか？ –

次に近いのは、前に入力したコントロールではなく、次に入力したいコントロールです – sadcat

ところで、これは合法的な技術的な質問であり、ビジネス上の必要条件である可能性があります。私はこのような振る舞いをバックオフィスのアプリケーションに組み込むように求められてきました。このように動作する多くのネイティブアプリがあります。

私は、以下の例のようにcontenteditable = trueのDIVを使用してフォームを構築することでこの要件に取り組んでいます。

<html> 
<head> 
    <style type="text/css"> 

    div.input { border:1px solid #aaa; width:300px; } 

    </style> 

</head> 
<body> 

    <div contenteditable="true" class="input"><strong>explore the world,</strong> e.g. paris, france</div> 

</body> 
</html>

Enterキーイベントをキャプチャし、JQueryを使用して次の兄弟にフォーカスを設定することができます。

さらに詳しい説明が必要な場合はお知らせください。

これが役に立ちます。がんばろう。

出典

2013-01-02 17:03:45

私はすでにこれまでにやっています。 http://jsfiddle.net/R8PhF/3/

$(document).ready(function(){ 
    $('#mytextbox').keyup(function(e){ 
     var code = (e.keyCode ? e.keyCode : e.which); 
     if(code == 13) { 
      var tabables = $("*[tabindex != '-1']:visible"); 
      var index = tabables.index(this); 
      tabables.eq(index + 1).focus(); 
     }   
    }); 
});

出典

2013-01-02 17:05:45 phnkha

建設的なフィードバックと質問の理解に感謝します。 +1 –

それはカスタムタブのインデックスを扱わない、と私は思わない。したがって、特定のユースケースでは動作するかもしれませんが、すべてではありません。 – Scott

これはまた、フォーカス可能なセレクタでもありません。 tabIndex = -1を除外し、適切な要素と制約に制限し、tabIndex = 0のものを含める必要があります（従来はフォーカスできないdivなど）。これはまさにあなたが望むものではありませんが、より良いスタートです。セレクタは、それを動作させるために変更する必要がある唯一のものです。 '：focusable'のjquery UIセレクタも使用できます。（フィドルが壊れていることを示して、それを動作させるためにフィルタを更新してください。）http://jsfiddle.net/b45rw/ – Scott

アルゴリズムワイズここに私の解決策をお試しください：

焦点を当て可能なすべての要素のリストを保管してください。 ではなく、はDOMに依存しています。あなたは自分でリストを保持する必要があります。どの要素がページ上にあるのかわからない場合は、すでに何か問題があります。 DOMはビューではなく、データストアであるため、適切に処理してください。 jQueryを使用する多くの初心者はこの間違いを犯しますが、jQueryではこの間違いが簡単です。
ページ上のすべてのフォーカス可能な要素の位置を検索します。 1.に従う最良の方法はもちろんを知っている DOMを見なくてもすべての要素の相対的な位置を知っている。 jQueryでは.dimension()を使用できます。このリストを最新の状態に保つために（つまり、データ/ビューが変更されたとき）、簿記をしなければならないかもしれません。
現在のフォーカスされた要素の位置を検索します。
は、他の位置のリストにそれを比較すると（これは多くのことを意味することができ、あなたはおそらくあなたが望むものを知っている）最も近いを得るために、いくつかのアルゴリズムを使用してください。
次に、フォーカスを要素に設定します。

ここでは多くの選択肢がありますが、パフォーマンスによってはインタラクションやインターフェイスデザインに依存するものもあります。

出典

2013-01-02 17:09:23 Halcyon

DOMをデータストアと見なさないための+1。 – Tvaroh

-1は、ドキュメントをオブジェクトとして記述するモデルのアプリケーションプログラミングインターフェイスとしてDOM APIを使用することは、何とか反パターンであることを示唆しています。 OPが決定しようとしているブラウザーの動作は、ブラウザー自体がDOMを使用して推論するものです。作者が試行錯誤によってこれを行うために同じ論理を試して使用することは完全に合理的であるだけでなく、人間の観察と保守は基本的に反プログラミング手法です。 – Barney

@Barneyそれは私が示唆しているものではありません。私はこれをずっと前に投稿していたので、私の正確な考えは分かりませんでした。 '$（" * [tabindex！= '-1']：visible "）;' DOMを照会し、どの要素が_next_であるかを調べるような文。しかし、入力要素をレンダリングするときに、レンダリングする順序を知っているので、DOMをクエリする必要はありません。論理がシンプルである限り、_jQuery_アプローチは機能しますが、ちょっとした複雑さを導入すると（たとえば、フィールドをスキップし、ボタンをスキップして、最後のフィールドを送信する必要があります）、奇妙なコードになります。 – Halcyon

jqueryを使用して次にフォーカス可能な要素を見つけますか？

答えて

関連する問題