如何访问功能键以将焦点添加到控件？

Question

在我的主页上的Web应用程序中，有一个搜索框[ <option> </option> list ]用于搜索页面。

像这样的东西

我想在功能键[f9]上启用此搜索选项。 我怎样才能做到这一点 ？

设计

<form class="form form-search">
                    <select id="select-templating" data-placeholder="Search " onchange="location = this.value;" class="width300">
                        <option value="">Search</option>
                        <option value="Home.aspx">Home</option>
                        <option value="Modifications.aspx">Modifications</option>
                        <option value="AuthorizationList.aspx">Authorization List</option>
                        <option value="Modifications.aspx">Modifications</option>
                        <option value="AccountClosing.aspx">Account Closing</option>
                        <option value="AccountTransaction.aspx">Account Transaction</option>
                        <option value="CustomerCreation.aspx">Customer Creation</option>
                        <option value="ShareDividendDeclaration.aspx">Share Dividend Declaration</option>
                    </select>
                </form>

在同一解决方案中，我使用键f2使用jquery函数重定向到主页（正在运行）：

 $(function () {
        $(document).keyup(function (e) {
            var key = (e.keyCode ? e.keyCode : e.charCode);
            switch (key) {

                case 113:
                    window.location.replace("Home.aspx");
                    break;

                default:;
            }
        });
        function navigateUrl(jObj) {
            window.location.href = $(jObj).attr("href");
        }
    });

但是我不知道如何使用f9键进行打开搜索<option>控件。

Answer 1

您可以利用open的选项， select2插件打开select上的F9 ：

$(document).on('keyup',function(e){
    if(e.which==120){
    $('#select-templating').select2('open');
  }
})

这是小提琴演示

更新代码如下：

$(document).keyup(function (e) {
     var key = (e.keyCode ? e.keyCode : e.charCode);
     switch (key) {
            case 113:
                window.location.replace("Home.aspx");
                break;
            case 120:
                $('#select-templating').select2('open');
                break;
            default:;
     }
});

让我知道您是否遇到任何问题。

Answer 2

使用focus方法。 下面的例子。

 $(document).keyup(function (e) { var key = (e.keyCode ? e.keyCode : e.charCode); switch (key) { case 120: { $('select').focus(); break; } default:; } }); 

 select:focus { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple> <option>Opt1</option> <option>Opt2</option> <option>Opt3</option> </select> 

编辑

您说您尝试过聚焦，所以也许尝试click而不是focus 。