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

即 8：

  1. 从下面的建议中选择一个选项element1
  2. 字段更改中的值
  3. 建议崩溃
  4. 场模糊并element2集中注意力
  5. 搜索此字段的触发

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

我为此找到了一个有趣的“修复” element2.focus()，例如在 100 毫秒后使用setTimeout(). 我猜这是因为element1's 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 回答