元素2. fired ()在元素1. working ()不工作于Fx/Chrome/Safari - Salesforce之后触发

Question

我在Salesforce (visualforce)上使用自定义的自动完成Javascript。我的要求是，一旦从关于另一个文本字段element2的建议中选择一个选项，就会触发对文本字段element1的自动完成搜索。

由于我需要能够滚动使用键盘的自动建议列表，我需要集中在特定的领域。我现在正在做一个element2.focus()，就在element1上做了一个选择，触发了element2上的自动建议搜索。

此外，在这些字段上，当搜索正在运行，用户手动将注意力集中在该字段时，自动建议就会崩溃--这是取消搜索的一个指示。因此，我不能触发搜索，然后调用element2.focus()

以下是在不同浏览器中的体验：

Chrome/Firefox 3.5，4/Safari 5.0.3：

在element1

• Value下的changes

• Suggestions collapse

• Field字段中，

1. 从建议中选择了一个选项，但不确定焦点在哪里。可能是window

IE 8：

从element1

• Value下的建议中选择一个选项，changes

• Suggestions collapse

• Field模糊和element2选择焦点

• 搜索该字段

此外，上述行为的差异是，只有当我选择使用鼠标点击。当使用击键(向上/向下，然后输入)时，这在所有浏览器中都能正常工作。同一组javascript方法都在鼠标和键盘选择上执行。

我发现了一个有趣的“修复”方法，就是在使用setTimeout()的100 ms之后调用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();
}

Answer 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>