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);
});

Keypress到文本字段的任何地方？

3 个答案: