Question

I am trying to figure out how to create a small web page onload() animation that types text in a form field and then presses a button. Kinda like Let me Google that for you.

Suggestions? I have been searching for a jQuery plugin (preferably) that accomplishes this, or am open to plain JavaScript, but have been coming up empty.

Answer 1

http://jsfiddle.net/Pcjua/

the cursor will be just an absolutely positioned PNG image that moves to the box, executes the following code. and after the string is exhausted, move the cursor to the box, then followed by the trigger call in this code.

// quick example of searching via google using "http://www.google.com/search?q="

<form method="get" action="http://www.google.com/search" > 
<input type="text" name="q" />
<input type="submit" value="I'm Feeling Lucky" />
</form>

​$(document).ready(function() {

    //get element references
    var input = $('input[name="q"]');
    var button = $('input[type="submit"]');
    var form = $('form');

    //the string exploded into single characters
    var query = "Let me Google for you".split('');

    //create function and execute immediately (wrapping of and appending of parenthesis)
    (function autoTypeMe() {

        //get the first letter and append in the input
        var letter = query.shift();
        input[0].value += letter;

        //if string not fully typed, continue
        if (query.length) {
            setTimeout(autoTypeMe, 100);
        } else {

            //move the cursor here

            //trigger the click in two ways, click the button, or submit the form
            button.trigger('click');
            //or
            //form.submit();
        }

    }());

});​