gpt4 book ai didi

javascript - Html下拉: how to handle key events of select option element

转载 作者:行者123 更新时间:2023-11-28 01:49:37 25 4
gpt4 key购买 nike

我尝试了以下代码来在 html 中创建下拉菜单

<select onkeydown="func()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

当您单击下拉菜单列表时,将打开:选项有: A 乙 C d我正在尝试的是按退格键,下拉列表应该关闭,并且焦点必须设置为下拉列表,但是当焦点位于下拉列表项上时,我无法触发事件。如果您帮助我,我将不胜感激。谢谢。

最佳答案

我已经发布了一个完整的示例,它解决了以下问题

  • When Drop down is open and user press BACKSPACE , it reset the value(Which can b any).
  • Gives Focus back to Drop Down box
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Backspacing in a dropdown</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<p>
When Drop Down is open and user has clicked Backspace, it goes back to selected value <br />
</p>
<select id="mySelectDropDown">
<option>Boston</option>
<option selected="true">Texas</option>
<option>London</option>
<option>Bolton</option>
</select>
</form>

<script type="text/javascript">
$(document).ready(function() { // FF needs keypress, IE needs keydown
$('select').keypress(function(event)
{ return cancelBackspace(event) });
$('select').keydown(function(event)
{ return cancelBackspace(event) });
}); // ready

function cancelBackspace(event) {
if (event.keyCode == 8) {
var element = document.getElementById('mySelectDropDown');
element.value = 'London';
$('#mySelectDropDown').toggle();
$('#mySelectDropDown').focus;
return false;
}
}
</script>

</body>
</html>

关于javascript - Html下拉: how to handle key events of select option element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19851490/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com