javascript focus search form on keydown ? (question mark)

Question

How do I focus search form input field when these two keys are pressed using Javascript?

shift + / will generate the ?

So basically, on keydown for question mark, the search form gets autofocus.

Here is my current bootstrap 3 search form code:

<form class="navbar-form navbar-right" role="form" method="post" action="{$WEB_ROOT}/knowledgebase.php?action=search">
    <div class="form-group">
        <input id="inputMessage" class="form-control" placeholder="Search website.com" type="text" name="search">
    </div>
    <button type="submit" class="btn btn-default"></button>
</form>

Check this: http://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea — David Lampon, Mar 29 '17 at 07:02
@user7411567 , I made a small change. moved the `e.preventDefault();` to inside of `if` in the answer. Please update the code in your production site. — Sagar V, Mar 30 '17 at 08:13

score 2 · Answer 1 · answered Mar 29 '17 at 07:05

2

try

$(document).on('keypress',function(e){
   if(e.keyCode == 63 ) {
      $("#inputMessage").focus()
   }
});

answered Mar 29 '17 at 07:05

Sushen Suri

74
2

Sagar V · Accepted Answer · 2017-03-30T08:12:12.857

2

Check this code.

Create an object to store the keypress and add an eventListener which add each key press to the Object.

Then check for the keyCodes Shift(16) and /(191)

var map = {}; //to store the keycodes
onkeydown = onkeyup = function(e){
    e = e || event;
    
    map[e.keyCode] = e.type == 'keydown';
    
    if(map["16"]==true && map["191"]==true){  // 16 => shift and 191 /
      e.preventDefault();
      var elm=document.getElementById('inputMessage');
      elm.focus();
      
    }
    /* insert conditional here */
}

<form class="navbar-form navbar-right" role="form" method="post" action="{$WEB_ROOT}/knowledgebase.php?action=search">
    <div class="form-group">
        <input id="inputMessage" class="form-control" placeholder="Search website.com" type="text" name="search">
    </div>
    <button type="submit" class="btn btn-default"></button>
</form>

edited Mar 30 '17 at 08:12

answered Mar 29 '17 at 07:08

Sagar V

12,158
7
41
68

1

Note: `keyCode` is deprecated: [https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) – buchstabe Jun 13 '21 at 20:34
1

@buchstabe Thanks for the update. Deprecated code will still work for few more months/ years. According to MDN, the alternative is `code` and it's not implemented by all browsers. _you should use KeyboardEvent.code, if it's implemented. Unfortunately, some browsers still don't have it_. I've to check for browser support and will update the answer – Sagar V Jun 14 '21 at 09:01

Dr. Roggia · Answer 3 · 2017-03-30T08:13:00.400

1

This work. You have to use the event e.shiftKey with the keycode of the / button (I used 219 because it's the ? position in the italian keyboard layout)

$(document).on('keydown', function(e){
  if(e.shiftKey && e.keyCode == 219)
  {
    $("#search").focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search">

edited Mar 30 '17 at 08:13

answered Mar 29 '17 at 07:29

Dr. Roggia

1,095
3
16
40

score 0 · Answer 4 · answered Mar 29 '17 at 07:04

0

This works, but maybe you advise more clean solution?

<script type="text/javascript">
$(document).keyup('keyup', function(event){
    if(event.which === 191) {
        $('#inputMessage').focus();
    }
});
</script>

Maybe it shouldn't be keyup or perhaps the focus is not best. Whatcha think? I'm looking for the absolute superior way to achieve results.

answered Mar 29 '17 at 07:04

Uncle Iroh

137
1
12

1

check my answer. – Sagar V Mar 29 '17 at 07:11

javascript focus search form on keydown ? (question mark)

4 Answers4