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

标签： javascript html onfocus

1条回答

傲

2楼-- · 2019-03-04 06:21

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>

0人赞添加讨论(0) 举报

Focus Input Box On Key Pressed

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间