How to access function key to add focus to a control?

Question

In my web application on my master page I have a search box [<option> </option> list] for searching pages.

I like to enable this search option on function key press [ f9 ]. How can I do that ?

Design

<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>

In the same solution, I used key f2 to redirect to home using jquery function(which is working) :

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

but I don't know how to use f9 key for open search <option> control.. Help me please

yes..! itried to use `$('#select-templating').focus();` its not workng ! am not familiar with jquery ! — , Jun 07 '17 at 10:00

score 1 · Accepted Answer · answered Jun 07 '17 at 13:19

1

You can make use of open option of select2 plugin to open select on F9:

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

Here's the Fiddle DEMO

Updating your code would be as below:

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

Let me know if you face any issue.

answered Jun 07 '17 at 13:19

Guruprasad J Rao

29,410
14
101
200

Anytime.. Happy coding.. :) – Guruprasad J Rao Jun 08 '17 at 07:18
I have a doubt ! Can we overwrite browser defaulf key ? how can i use f5(default refresh) for other shortcut ( redirect to a page) ? – Jun 09 '17 at 05:55
@frank.. **[This post helps you](https://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript)**.. :) – Guruprasad J Rao Jun 09 '17 at 06:00

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Using focus method. Example below.

$(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>

Edit

You said you tried focus, so maybe try click instead of focus.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 07 '17 at 10:00

Oen44

3,156
1
22
31

`$('#select-templating').click` something like this, on case condition ?? – Jun 07 '17 at 10:20
Yes, don't forget `()` at the end of `click`. – Oen44 Jun 07 '17 at 10:25
`$('#select-templating').click();` is also not working :( – Jun 07 '17 at 10:30
Are you sure it's even doing something? Try some testing stuff like `console.log` when search is clicked or focused. – Oen44 Jun 07 '17 at 10:32
`case 120:$('#select-templating').click();//alert("21321321"); break;` i tried to create an alert from f9 , its working bt click is not workng – Jun 07 '17 at 11:09
That's not what I mean, listen to `click` and `focus` event. – Oen44 Jun 07 '17 at 11:26
no solution for this qstn, see this - https://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list – Aju Jun 07 '17 at 11:39

How to access function key to add focus to a control?

2 Answers2

Edit