element2.focus(） 在 element1.onblur(） 在 Fx/Chrome/Safari 中不起作

element2.focus() fired after element1.onblur() not working in Fx/Chrome/Safari - Salesforce

本文关键字：Safari Fx focus element1 onblur element2 Chrome      更新时间：2023-09-26

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

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

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

以下是在不同浏览器中遇到的问题：

Chrome/Firefox 3.5， 4/Safari 5.0.3：

  1. 从"element1"下的建议中选择一个选项
  2. 字段更改中的值
  3. 建议折叠
  4. 场模糊，但不确定焦点在哪里。大概window

IE 8：

  1. 从"element1"下的建议中选择一个选项
  2. 字段更改中的值
  3. 建议折叠
  4. 场模糊和element2聚焦
  5. 搜索此字段的火灾

此外，上述行为差异仅在我使用鼠标单击进行选择时。使用击键（向上/向下然后输入）时，这在所有浏览器中都按预期工作。在鼠标和键盘选择上执行同一组 JavaScript 方法。

我为此发现的一个有趣的"修复"是在 100 毫秒后使用 setTimeout() 调用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();
}

你能使用框架吗？它们确实消除了跨浏览器事件兼容性的痛苦。下面是一个使用 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>
相关文章：