Как сфокусировать скрытое поле ввода

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'] должен делать?

Попробуйте, как это вместо того, чтобы, используя find метод JQuery в

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

PEN

Answer 2

Вы должны find в input элемент в области Seach, а затем вызвать focus() на нем:

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

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

Updated CodePen

Answer 3

Или просто установить идентификатор для поля ввода (< ввода автофокусировки = «автофокус» id="hid_inp">) и использовать $("#hid_inp").focus(); вместо searchArea.elements['input'].focus();"