javascript - Focus Input Box On Key Pressed

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

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

Share Improve this question edited May 23, 2017 at 12:07 CommunityBot 11 silver badge asked Mar 16, 2016 at 15:34 A. Mesut Konuklar 6094 gold badges12 silver badges29 bronze badges

$(document) check this and add the id or class or element – Santosh Ram Kunjir Commented Mar 16, 2016 at 15:36
Is this script in the head or in the bottom of the body? – Mosh Feu Commented Mar 16, 2016 at 15:37
@MoshFeu Its located in the head. – A. Mesut Konuklar Commented Mar 16, 2016 at 15:38
So, you need to move it to the bottom of the body, or wrap it with $(document).ready. More info in this question: stackoverflow./questions/14328449/… – Mosh Feu Commented Mar 16, 2016 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 Commented Mar 16, 2016 at 15:53

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Focus Input Box On Key Pressed - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)