Question

使用Salesforce（visualforce）并使用自定义自动填充javascript。我的要求是，一旦根据另一个文本字段element2上的建议进行选择，就会在文本字段element1上触发自动完成搜索。

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

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

以下是我在不同浏览器中遇到的情况：

Chrome / Firefox 3.5,4 / Safari 5.0.3：

从element1
字段更改中的值
建议崩溃
场地模糊，但不确定焦点在哪里。可能是window

IE 8： 1.从element1下的建议中选择一个选项 2.现场变更的价值 3.建议崩溃 4.场模糊，element2成为焦点 5.搜索此字段的火灾

此外，上述行为差异仅在使用鼠标点击进行选择时。当使用击键（向上/向下然后输入）时，这在所有浏览器中都按预期工作。在鼠标和键盘选择上执行相同的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();
}

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>

element1.onblur（）在Fx / Chrome / Safari中无法运行后触发的element2.focus（） - Salesforce

1 个答案: