用于演示的表单字段中的动画文本输入

animated text input in a form field for demo

本文关键字：动画 文本 输入 表单 用于 字段      更新时间：2023-09-26

我正在尝试创建一个小网页onload()动画，该动画在表单字段中键入文本，然后按下按钮。有点像让我帮你谷歌一下。

建议？我一直在寻找一个jQuery插件（最好）来实现这一点，或者对纯JavaScript持开放态度，但一直是空的。

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

您可以使用setInterval每隔几毫秒将var中的一个字符添加到输入中，然后使用一些jQuery动画API将鼠标光标的PNG移动到按钮上，并激活按钮的onclick。

您可以使用javascript setInterval每隔半秒或一秒运行一个函数。在该函数中，您可以使用类似以下的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++

我认为这应该会让你朝着正确的方向开始。

这里有一个非常简单的版本：

<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>
相关文章：