Focus Input Box On Key Pressed

Question

I have created a live search, I want when user clicks on ESC it should focus to input box and remove its content if not empty automatically.

I am able to remove the content but it won't focus on key press.

The function focus(); works when I use it on window.onload

I have the existing code: (also tried the ones maked in comment thanks to Focus Input Box On Load, and JavaScript set focus to HTML form element)

var aramaAlani = document.getElementById("id_arama");

$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { //ESC key code
        aramaAlani.reset();
        aramaAlani.focus();     
        //aramaAlani.scrollIntoView();
        //document.forms[ 'id_arama' ].elements[ _element ].focus();
        //document.getElementById("id_search").focus();
    }
});

Is there any specific method for key events to focus on element?

Is this script in the `head` or in the bottom of the `body`? — Mosh Feu, Mar 16 '16 at 15:37
So, you need to move it to the bottom of the body, or wrap it with `$(document).ready`. More info in this question: http://stackoverflow.com/questions/14328449/when-do-you-put-javascript-in-body-when-in-head-and-when-use-doc-load — Mosh Feu, Mar 16 '16 at 15:50
@MoshFeu, Thanks for prompt reply. I have tried to move it or wrap it with `$(document).ready` but it doesn't work. — A. Mesut Konuklar, Mar 16 '16 at 15:53

score 4 · Accepted Answer · answered Mar 16 '16 at 16:01

You can't call clear function on input.

You have 2 options:

Clear the specific input using input.value = '';

Like this:

<body>
  <input type="text" id="id_arama" />
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var form = document.querySelector('form');
    var aramaAlani = document.getElementById("id_arama");

    $( document ).on( 'keydown', function ( e ) {
      if ( e.keyCode === 27 ) { //ESC key code
        //form.reset();
        aramaAlani.value = '';
        aramaAlani.focus();     
        //aramaAlani.scrollIntoView();
        //document.forms[ 'id_arama' ].elements[ _element ].focus();
        //document.getElementById("id_search").focus();
      }
    });
  </script>
</body>

Or you can use the method reset() but you can call it only on form element. The good point in this solution is if you want to clear many inputs.

Like this:

<body>
  <form>
    <input type="text" id="id_arama" />
  </form>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var form = document.querySelector('form');
    var aramaAlani = document.getElementById("id_arama");

    $( document ).on( 'keydown', function ( e ) {
      if ( e.keyCode === 27 ) { //ESC key code
        form.reset();
        aramaAlani.focus();     
        //aramaAlani.scrollIntoView();
        //document.forms[ 'id_arama' ].elements[ _element ].focus();
        //document.getElementById("id_search").focus();
      }
    });
  </script>
</body>

Thank you for such a great explanation. I have everything the same but it still does not work on mine.I covered my `` with `
` right after `
`. Do I have to update the querySelector? — A. Mesut Konuklar, Mar 16 '16 at 16:40
Nope.. The `querySelector` should cover it too. Can you create a working snippet or bin with your code so I could try to understand what's wrong with it? — Mosh Feu, Mar 16 '16 at 16:52
This is the full version: https://jsfiddle.net/k7a7suj9/ , search javascript side doesnt included since it doesnt work on jsfiddle for some reason. — A. Mesut Konuklar, Mar 16 '16 at 17:21
I was fixed the fiddle. There were jquery references problem. Also, you changed the `id ` of the input from `id_arama` to ``. https://jsfiddle.net/k7a7suj9/2/ — Mosh Feu, Mar 17 '16 at 05:29

Focus Input Box On Key Pressed

1 Answers1

Linked

Related