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

Posted 2023-03-05

【中文标题】使用 Javascript 将焦点设置在选择元素上会将第一个项目滚动到视图之外

【英文标题】：Setting focus on select element with Javascript scrolls first item out of view

【发布时间】：2016-07-25 06:26:46

【问题描述】：

我遇到了一个问题，我希望在选择框（多选）上方有一个输入框。选择框中的项目多于框的高度。 （我将盒子的大小设置为低于项目数）。

<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;
  
);

当用户执行此操作时，多选框中的第一项会滚动到视图之外。这个问题在 Chrome 和 Firefox 中都会发生（在 Mac 上 [Safari 很好]）。

你可以在这里看到问题。

https://jsfiddle.net/rsturim/ops9q3xk/

【参考方案1】：

将preventDefault 添加到您的关键事件中。例如，我注意到在 Safari 中，如果可以的话，它会稍微向下滚动页面。这意味着 keyevent 实际上被传递给几件事，其中可能包括您的选择：

var inputField = document.getElementById("inputField");
var multiSelect = document.getElementById("multiSelect");

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

multiSelect.addEventListener("keydown", function(e) 
  if (e.keyCode == 38 && multiSelect.selectedIndex == 0) 
    inputField.focus();
  
);

<div>
  <input id="inputField" type="text" placeholder="start here" /> => use down arrow to move to multi-select box
</div>
<div>
  <select id="multiSelect" size="5" 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>
    <option value="item7">Item 7</option>
    <option value="item8">Item 8</option>
    <option value="item9">Item 9</option>
    <option value="item10">Item 10</option>
  </select> => use up arrow to move to input box
</div>

Aslo，请注意您的 input 元素是自闭合元素，所以 <input /> 而不是 <input></input>（抱歉，SO Snippet 编辑器显示存在语义错误） （在 Safari 和 Chrome 中测试）

【讨论】：

哇，就是这样。很棒的发现，非常感谢！