3

私は Salesforce (visualforce) を使用しており、カスタムのオートコンプリート Javascript を使用しています。element2私の要件は、別のテキストフィールドの提案から選択が行われるとすぐに、テキストフィールドでオートコンプリート検索をトリガーすることelement1です。

キーボードを使用して自動提案リストをスクロールできるようにする必要があるため、特定のフィールドにフォーカスする必要があります。現在element2.focus()、 で選択が行われた直後に を実行してelement1おり、 で自動提案検索をトリガーしていelement2ます。

また、これらのフィールドでは、検索の実行中にユーザーがフィールドに手動でフォーカスすると、自動提案が折りたたまれます。これは、検索がキャンセルされたことを示しています。このため、検索をトリガーしてから呼び出すことができませんelement2.focus()

さまざまなブラウザーで発生していることは次のとおりです。

Chrome/Firefox 3.5、4/Safari 5.0.3:

  1. 下の候補からオプションを選択しますelement1
  2. フィールドの値の変更
  3. 提案の崩壊
  4. フィールドがぼやけていますが、焦点がどこにあるのかわかりません。おそらくwindow

IE8:

  1. 下の候補からオプションを選択しますelement1
  2. フィールドの値の変更
  3. 提案の崩壊
  4. フィールドがぼやけてelement2焦点が合う
  5. このフィールドの検索が起動します

また、上記の動作の違いは、マウス クリックを使用して選択している場合のみです。キーストローク (上/下から Enter) を使用すると、これはすべてのブラウザーで期待どおりに機能します。マウスとキーボードの両方の選択で、同じ JavaScript メソッドのセットが実行されます。

これに対して私が見つけた興味深い「修正」はelement2.focus()、たとえば、 を使用して 100 ミリ秒後に呼び出すことsetTimeout()です。element1これはの onblur が混乱しているためだと推測してelement2.focus()いますが、これを使用して本当に満足していません。

さて、何かアイデアはありますか？

コード サンプル:

//mouseclick handler

function handleMouseClick(event){

element1.value = (event.target)?event.target.textContent:event.srcElement.innerText;
callback();

// kills the children and hides the div containing the suggestions
hideAutoComplete();
}


function callback() {
element2.value = '';
element2.focus();
}
4

1 に答える 1

1

フレームワークを使用できますか？イベントのクロスブラウザー互換性の問題を本当に解決してくれます。これは、あなたが望むことをするように見えるjQueryを使用した短い例です。主要なフレームワークはどれも、おそらくこれと同じように機能します。

<html>
    <head>
        <title>Testing some JS behavior</title>
    </head>
    <body>
        <form id="fooForm">
            <label for="a">A: </label><input id="a"/><br />
            <label for="b">B: </label><input id="b"/><br />
        </form>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script>
            $('#b').focus(function(e) {
                alert("Focusing on b now.");
            });

            $('#a').blur(function(e) {
                alert("Doing my business on element A.");
                $('#b').focus();
                // Stop bubbling, just in case this got triggered by them clicking into B
                return false;
            });
        </script>
    </body>
</html>
于 2011-05-26T18:58:14.257 に答える