CODEWITHSUNDEEP
javascript
punkish
punkish

Reputation: 15268

animated text input in a form field for demo

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.

Upvotes: 0

Views: 2565

Answers (4)

Joseph
Joseph

Reputation: 119867

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

    }());

});​

Upvotes: 6

RobG
RobG

Reputation: 147453

Here's a really simple version:

<script>

window.onload = function() {
  var form = document.forms.foo;
  var field = form.query;
  var queryText = 'javascript setTimeout';
  var count = 0;

  var fn = function() {
    if (count < queryText.length) {
      field.value = queryText.substring(0, ++count);
      window.setTimeout(fn, 100); 
    } else {
      window.location.href = 'http://www.google.com.au/#hl=en&q=' + 
                              queryText.replace(/\s+/g, '+');
    }
  }
  fn();
}

</script>
<form name="foo">
  <div>
    <input type="text" name="query">
    <input type="submit">
  </div>
</form>

Upvotes: 0

Luke
Luke

Reputation: 2063

You could use the javascript setInterval to run a function every half second or second. Inside that function you could use something like this psudocode:

var count = 0
var string = "Text to go into text field" //first two lines would have to go outside
$(input).val(string.slice(0,count));
count++

That should get you started in the right direction I think.

Upvotes: 0

Umbrella
Umbrella

Reputation: 4788

You could use setInterval to add a character from your var to the input every so many milliseconds, then use some jQuery animation APIs to move a PNG of a mouse cursor to the button, and activate the button's onclick.

Upvotes: 1

Related Questions