javascript - 在任何地方按键到文本字段？

Question

我想模仿新 Myspace 中的功能。发生的情况是您可以简单地开始输入，并且 UI 更改为“搜索”。输入的字符现在位于一个大文本字段中，并自动完成显示结果。

如何检测页面上任意位置的按键，而不是特定文本字段中的按键？然后，如何显示文本和/或将焦点放在输入文本的文本字段上？

Answer 1

尝试这个

function keydown(){
    //key was pressed
}  
document.onkeydown=keydown;

演示：http: //jsfiddle.net/enve/djsQ8/1/

Answer 2

HTML 代码

<input type="text" value="type here"/><br/>
<textarea>type here</textarea><br/>
<input type="text" value="don't type here" class="searchbox"/><br/>

​ JavaScript (jQuery) 代码

$( document ).on( 'keydown', function( ev ) {
    var nodeName = ev.target.nodeName;

    if ( 'INPUT' == nodeName || 'TEXTAREA' == nodeName ) {
        return;
    }
    $( '.searchbox' ).val( '' ).trigger( 'focus' );
} );​

这是小提琴：http: //jsfiddle.net/bukfixart/PThCS/

Answer 3

仅适用于第一次。可能这就是你想要的。使用 jQuery 会更容易更好。但首先，一个纯 JavaScript。

更新- 不。只根据需要发布 jQuery，检查 JavaScript 的小提琴

var firstTyped = false,
    field = $('#field');

function startTyping(evt) {
    evt = evt || window.event;
    if (firstTyped) {
        $(document).unbind('keypress', startTyping);                      
    }
    firstTyped = true;
    field
        .fadeIn(200)
        .focus()
}
$(document).keypress(startTyping);

就像谷歌搜索一样。您也可以最初隐藏该字段，然后在第一个字符类型上显示。

http://jsfiddle.net/OMS_/ztKLA/

更新：

对于您在评论中提到的场景，我认为以下伪代码可能有用

$(yourform).submit(function() {
    ....
    // Submit Successful
    // Reset the text field and bind the event again:
    field.val('').hide();
    $(document).keypress(startTyping);
});