12

テキストボックスに、ユーザーがEnterキーを押すたびに、フォーカスできる限り、次に近い要素(入力、チェックボックス、ボタン、ラジオ、選択、a、div)にフォーカスする機能が必要です。jqueryを使用してそれを行うにはどうすればよいですか?

4

3 に答える 3

4

ところで、これは正当な技術的な質問であり、ビジネス要件である可能性が非常に高いです。このような動作をバック オフィス アプリに組み込むように依頼されることがよくあります。このように動作する多くのネイティブ アプリがあります。

以下の例のように 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-02T17:03:45.257 に答える
0

アルゴリズム的に:

  1. フォーカスできるすべての要素のリストを保持します。これを DOM に依存しないでください。リストは自分で保管する必要があります。どの要素がページにあるのかわからない場合は、すでに何か間違ったことをしています。DOM はデータストアではなくビューです。それに応じて処理してください。jQuery を使用する多くの初心者はこの間違いを犯しますが、jQuery を使用すると、この間違いを犯しやすくなります。

  2. ページ上のすべてのフォーカス可能な要素の位置を見つけます。1. に従って、最良の方法はもちろん、DOM を見なくてもすべての要素の相対的な位置を知ることです。jQueryを使用すると、.dimension(). このリストを最新の状態に保つために、簿記を行う必要がある場合があります (つまり、データ/ビューが変更されたとき)。

  3. 現在フォーカスされている要素の位置を見つけます。

  4. いくつかのアルゴリズムを使用して、他のポジションのリストと比較し、最も近いものを取得します(これは多くのことを意味する可能性があり、おそらく何が必要かはわかっています)。

  5. 次に、要素にフォーカスを設定します。

ここでは多くの選択肢があり、パフォーマンスに依存するものもあれば、インタラクションとインターフェイスの設計に依存するものもあります。

于 2013-01-02T17:09:23.650 に答える