我正在尝试使用jQuery-UI-Selectmenu的下拉功能。
根据https://api.jqueryui.com/selectmenu/为选择菜单提供的API文档，'SPACE'键可用于打开选择菜单，但不能使用'ENTER'键。
一个基本的HTML选择可以使用'ENTER'键打开，但不能打开选择菜单。对于可访问性要求，我需要使用'ENTER'键打开选择菜单。
你能帮帮我吗?下面是我用来创建下拉菜单的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nuber</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
} );
</script>
</head>
<body>
<div class="demo">
<form action="#">
<select name="number" id="number">
<option>1</option>
<option >2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>
</div>
</body>
</html>
这有点俗气，但你可以这样做(可能需要在第一次点击两次enter):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nuber</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$(function() {
let isOpen = false
$(".container").on("keydown", function(event) {
if (event.which === 13) {
isOpen = !isOpen
if (!isOpen) {
$("#number").selectmenu("open");
} else {
$("#number").selectmenu("close");
}
}
})
$("#number").selectmenu()
.selectmenu("menuWidget")
.addClass("overflow");
});
</script>
</head>
<body>
<div class="container">
<form action="#">
<div id="foo">
<select name="number" id="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</form>
</div>
</body>
</html>我希望这对你有帮助