如何聚焦隱藏的輸入字段

Question

我是JS的新手，它試圖創建一個僅在用戶在頁面上的任何地方鍵入時才會顯示的輸入字段。 當前，輸入字段的顯示有效，但是一旦可見，用戶仍然必須單擊該字段以鍵入該字段。

我希望它像這樣工作：

• 用戶按下“ S”
• 出現帶有“ S”的字段。

任何幫助將非常感激！

http://codepen.io/jeremypbeasley/pen/RNrore

var searchArea = $(".search");

searchArea.hide();

$(document).ready(function()  {

  $( "body" ).keydown(function() {
    searchArea.show();
    searchArea.elements['input'].focus();
    console.log("worked!");
  });

});

Answer 1

searchArea.elements['input']應該做什么？

改用jQuery的find方法，像這樣嘗試

$( "body" ).on('keydown', function() {
    searchArea.show().find('input').focus();
});

鋼筆

Answer 2

您需要在搜索區域內find input元素，然后在其上調用focus() ：

$(document).ready(function()  {
  var $searchArea = $(".search").hide();

  $("body").keydown(function() {
    $searchArea.show();
    $searchArea.find('input').focus();
  });  
});

更新的CodePen

Answer 3

或者只是將id設置為輸入字段（<input autofocus =“ autofocus” id="hid_inp" >），然后使用$("#hid_inp").focus(); 而不是searchArea.elements['input'].focus();"