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

时间:2017-06-07 09:50:52

标签: javascript c# jquery asp.net

在我母版页上的网页应用中,我有一个搜索框[<option> </option> list],用于搜索网页。

something like this

我想在功能键上启用此搜索选项按[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>控件..请帮帮我

2 个答案:

答案 0 :(得分:1)

您可以使用open插件的select2选项在select上打开F9

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

<强> Here's the Fiddle DEMO

更新您的代码如下:

$(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:;
     }
});

如果您遇到任何问题,请告诉我。

答案 1 :(得分:0)

使用focus方法。示例如下。

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

        case 120: {
          $('select').focus();
          break;
        }

        default:;
    }
});
&#13;
select:focus {
  border: 1px solid red;
}
&#13;
<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>
&#13;
&#13;
&#13;

修改

你说你尝试过专注,所以也许尝试click代替focus