如何聚焦隐藏的输入字段

时间:2014-12-06 14:14:00

标签: javascript jquery html css

我是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!");
  });

});

3 个答案:

答案 0 :(得分:4)

searchArea.elements['input']应该做什么?

使用jQuery' find方法

尝试这样做
$( "body" ).on('keydown', function() {
    searchArea.show().find('input').focus();
});

PEN

答案 1 :(得分:2)

您需要find搜索区域内的input元素,然后在其上调用focus()

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

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

Updated CodePen

答案 2 :(得分:0)

或者只是将ID设置为输入字段(<输入自动对焦="自动对焦" id="hid_inp">) 并使用$("#hid_inp").focus();代替searchArea.elements['input'].focus();"