Start typing on the page to fill input

HTML

<p> Focus on this page - may be by clicking anywhere in the "Result" (this) frame <p>
<p> and then, start typing </p>

<input id="field" type="text" value="" placeholder="Search" />

CSS

input {
    margin: 10%;
    padding: 10px;
    
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    display: none;
}

JavaScript

// JavaScript
/*
var firstTyped = false,
    field = document.getElementById('field');

document.onkeypress = function(evt) {
    if (firstTyped) {
        document.onkeypress = null;
    }
    firstTyped = true;
    evt = evt || window.event;
    field.style.display = 'inline';
    field.focus();
};

*/


// jQuery

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