デモ用のフォームフィールドにアニメーションテキストを入力

Question

フォームフィールドにテキストを入力してボタンを押す小さなWebページonload()を作成する方法を解明しようとしています。キンダーのようなLet me Google that for you。

提案？私は、これを達成するjQueryプラグイン（できれば）を探していた、あるいは普通のJavaScriptを開いていますが、空になっています。

Answer 1

http://jsfiddle.net/Pcjua/

カーソルがボックスに移動するだけで絶対位置PNG画像となり、次のコードが実行されます。文字列が使い尽くされた後、カーソルをボックスに移動してから、このコードでトリガー呼び出しを続けます。

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

    }()); 

});​ 

Answer 2

varから1ミリ秒ごとに入力に文字を追加してから、いくつかのjQueryアニメーションAPIを使用してマウスカーソルのPNGをボタンに移動し、ボタンのonclickを有効にすることができます。

Answer 3

javacript setIntervalを使用して、半分または秒ごとに関数を実行できます。その機能の中では、次のようなものを使用することができます：

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++ 

私は正しい方向に向かっているはずです。

Answer 4

ここでは本当に簡単バージョンです：

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