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

Google検索と同じように。最初にフィールドを非表示にしてから、最初の文字タイプに表示することもできます。

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