使用Javascript在select元素上设置焦点会将第一项滚动到视图之外

我有一个问题，我想有一个选择框（多）上方的输入框。选择框中的项目比框的高度多。（我将框的大小设置为小于项目数）

当用户执行此操作时，multi-select框中的第一项将被滚动出视图。这个问题在Chrome和Firefox中都会发生（在Mac上[Safari很好]）

你可以看到这里的问题

---

将

preventDefault

添加到您的keyevent。例如，我注意到在Safari中，如果可以的话，它会稍微向下滚动页面。这意味着keyevent实际上被传递给了一些东西，其中可能包括您的选择：

var inputField=document.getElementById（“inputField”）；
var multiSelect=document.getElementById（“multiSelect”）；
inputField.addEventListener（“向下键”，函数（e）{
如果（e.keyCode==40）{
e、 预防默认值（）；
multiSelect.focus（）；
multiSelect.selectedIndex=0；
}
});
multiSelect.addEventListener（“向下键控”，函数（e）{
如果（e.keyCode==38&&multiSelect.selectedIndex==0）{
inputField.focus（）；
}
});

=>使用向下箭头移动到多选框
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
=>使用向上箭头移动到输入框
将
preventDefault
添加到您的keyevent中。例如，我注意到在Safari中，如果可以的话，它会稍微向下滚动页面。这意味着keyevent实际上被传递给了一些东西，其中可能包括您的选择：


var inputField=document.getElementById（“inputField”）；
var multiSelect=document.getElementById（“multiSelect”）；
inputField.addEventListener（“向下键”，函数（e）{
如果（e.keyCode==40）{
e、 预防默认值（）；
multiSelect.focus（）；
multiSelect.selectedIndex=0；
}
});
multiSelect.addEventListener（“向下键控”，函数（e）{
如果（e.keyCode==38&&multiSelect.selectedIndex==0）{
inputField.focus（）；
}
});

=>使用向下箭头移动到多选框
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
=>使用向上箭头移动到输入框
哇，就是这样。很好的发现，非常感谢！哇，就是这样。很好的发现，非常感谢！
<select id="multiSelect" size="3" multiple>
  <option value="item1">Item 1</option>
  <option value="item2">Item 2</option>
  <option value="item3">Item 3</option>
  <option value="item4">Item 4</option>
  <option value="item5">Item 5</option>
  <option value="item6">Item 6</option>
</select>

inputField.addEventListener("keydown", function(e) {
  if (e.keyCode == 40) {
    multiSelect.focus();
    multiSelect.selectedIndex = 0;
  }
});