我遇到一个问题,我想在选择框(多重)上方有一个输入框。选择框内的项目数量多于框的高度。 (我将盒子的大小设置为小于项目数量)。
<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;
}
});
当用户执行此操作时,多选框中的第一项将滚动到 View 之外。 Chrome 和 Firefox 都会出现此问题(在 Mac 上 [Safari 没问题])。
您可以在这里看到问题。
最佳答案
添加preventDefault
到您的关键事件。例如,我注意到在 Safari 中,如果可以的话,它会稍微向下滚动页面。这意味着键事件实际上被传递给一些东西,其中可能包括您的选择:
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>
此外,请注意您input
元素是一个自闭合元素,所以 <input />
而不是<input></input>
(抱歉,SO 片段编辑器向我显示存在语义错误)
(在 Safari 和 Chrome 中测试)
关于javascript - 使用 Javascript 将焦点设置在选择元素上会将第一个项目滚动到 View 之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36424235/