element2.focus() 在 element1.onblur() 无法在 Fx/Chrome/Safari 中工作后触发 - Salesforce答案

【问题标题】：element2.focus() fired after element1.onblur() not working in Fx/Chrome/Safari - Salesforceelement2.focus() 在 element1.onblur() 无法在 Fx/Chrome/Safari 中工作后触发 - Salesforce
【发布时间】：2011-05-17 12:57:21
【问题描述】：

我在 Salesforce (visualforce) 上并使用自定义自动完成 Javascript。我的要求是在从另一个文本字段 element1 的建议中进行选择后，立即在文本字段 element2 上触发自动完成搜索。

由于我需要能够使用键盘滚动浏览自动建议列表，因此我需要专注于特定领域。在element1 上进行选择并触发element2 上的自动建议搜索之后，我目前正在执行element2.focus()。

此外，在这些字段上，当搜索正在运行并且用户手动关注该字段时，自动建议会崩溃 - 这表示取消搜索。因此，我无法触发搜索并然后调用element2.focus()

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

Chrome/Firefox 3.5、4/Safari 5.0.3：

从element1 下的建议中选择一个选项
字段值更改
建议折叠
视野模糊，但不确定焦点在哪里。应该是window

IE 8：

从element1 下的建议中选择一个选项
字段值更改
建议折叠
字段模糊，element2 获得焦点
此字段的搜索触发

此外，上述行为差异仅在使用鼠标单击进行选择时。当使用击键（向上/向下然后输入）时，这在所有浏览器中都可以正常工作。鼠标和键盘选择都执行相同的 javascript 方法集。

为此我发现一个有趣的“修复”是在使用setTimeout() 100 毫秒后调用element2.focus()。我猜这是因为 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();
}

【问题讨论】：

你去@Matt。回调还会触发对 element2 的搜索
干杯。好吧，我想不出答案:(但我想知道
@Matt 如果当前的赏金到期，您可以投资赏金 :)

标签： javascript salesforce dom-events visualforce

【解决方案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>

【讨论】：

有帮助，但由于各种（非技术）原因，我无法使用框架
@LVS 在这种情况下，您可能希望在主要框架之一的源代码上达到顶峰，看看您能学到什么；这些天我的跨浏览器功能很弱。 YUI 是 BSD 许可的，而 jQuery 是 MIT、IIRC。