如何使用自定義邏輯使用“ENTER”鍵打開 jQuery-UI-Selectmenu 下拉菜單？ 文檔只允許打開“SPACE”鍵，但不允許打開“Enter”鍵
[英]How to open jQuery-UI-Selectmenu dropdown using 'ENTER' key using custom logic? Documentation only allows 'SPACE' key to open but not 'Enter' key
問題描述
我正在嘗試將 jQuery-UI-Selectmenu 用於下拉功能。
根據https://api.jqueryui.com/selectmenu/上為選擇菜單提供的 API 文檔，“SPACE”鍵可用於打開選擇菜單，但不能用於“ENTER”。
可以使用“ENTER”鍵打開基本的 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() {
$( "#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>
1 個解決方案
解決方案1
0 2022-07-14 18:29:50
這有點hacky，但你可以做這樣的事情（可能必須在第一次點擊輸入兩次）：
<!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>
我希望這有幫助
使用 Enter 鍵打開選擇文件對話框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.