按下键时焦点输入框

Question

我创建了一个实时搜索，我希望当用户点击 ESC 时它应该聚焦到输入框并自动删除其内容（如果不为空）。

我可以删除内容，但它不会专注于按键。

函数 focus(); 在 window.onload

上使用时有效

我有现成的代码：（由于 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();
    }
});

关键事件有没有具体的方法聚焦到element上？

Answer 1

您不能在 input 上调用 clear 函数。

您有 2 个选择：

使用input.value = '';

清除特定输入

像这样：

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

或者您可以使用方法 reset() 但您只能在 form 元素上调用它。这个解决方案的好处是如果你想清除很多输入。

像这样：

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

按下键时焦点输入框

Focus Input Box On Key Pressed

javascript

html

onfocus