如何在js中触发向下箭头？答案

【问题标题】：How to trigger arrow down press in js?如何在js中触发向下箭头？
【发布时间】：2020-10-29 08:20:49
【问题描述】：

我有这个填充和聚焦的代码，但我需要添加一个向下箭头事件，因为它会触发列表弹出，如下图所示。谁能帮我打线？

document.body.appendChild(element)

    element.addEventListener('click', function(){
        document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '16048'
        document.querySelector("input#generic_test_order_search.ui-autocomplete-input").focus()

     })


})();

【问题讨论】：

我想你需要发送一个keydown，然后是一个keyup KeyboardEvent，该元素具有正确的属性。方向键可能是slightly tricky。

标签： javascript event-listener

【解决方案1】：

您可以使用KeyboardEvent API。使用keyup 或keydown 事件 - 取决于哪个更适合您，然后查找键码（向下箭头键码为 40）。当按键被按下时，该事件将触发。您可以使用该网站通过单击here 来检查哪个键码与键盘上的哪个键相关联。

我从 MDN 网络文档中获得了以下代码。

eventTarget.addEventListener("keyup", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

【讨论】：

您好，感谢您的回答。这样做element.addEventListener('click', function(){ document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '16048' document.querySelector("input#generic_test_order_search.ui-autocomplete-input").focus() document.eventTarget.addEventListener("keyup", event => { if (event.isComposing || event.keyCode === 40) { return; } // do something }); }) })(); 但仍然不会触发向下箭头事件。
根据您第一次使用的示例，您似乎已经专注于建议的第一个项目（因为 focus()）。我建议添加一些其他建议的项目。如果在那之后它不起作用，您可以开始实现我展示的示例。
尝试使用您之前在此处提出问题时发布的代码，并尝试添加另一个在用户单击输入框时显示的建议（在您使用的屏幕截图中 15002）。然后看看您是否可以使用箭头键选择一个项目，而不使用我建议的代码。它可能会默认实现。

【解决方案2】：

信息不足。提供完整的 HTML 可能会更好...

（有点关联的问题：Script to fill a value automatically in the webpage input box）

1 - 这里的目标是获得class 的建议下拉菜单。并在里面找到children，可能还有一个children，然后触发click()就可以了。

由于很难猜出类名和结构，这里有一个非常等价的示例来说明如何点击下拉建议。

a) 这里是*。打开链接。 https://en.wikipedia.org/wiki/Stack_Exchange

b) 将以下代码另存为书签：

javascript:(function(){
    document.getElementsByClassName('suggestions')[0].children[0].children[1].click();
})();

c) 然后写三个字母goo 到*搜索。

d) 最后触发小书签。然后它将打开第二个建议的链接：children[1]。这就是它的工作方式。您可以自己尝试使用 HTML。

2 - 制作 bookmarklet 可能比附加事件侦听器稍好一些，因为您只需要插入值即可。

另一个选项是 Tampermonkey / Greasemonkey 以更自动地触发事物（实际上，此选项与书签几乎相同，代码结构完全相同且完全兼容）。

【讨论】：