placeholderTypewriter.js是一款可以在输入框中生成打字动画效果文本占位符的jQuery插件。该插件使用简单,可以以占位符的方式,按顺序反复在输入框中显示指定的文本。

使用方法

在页面中引入jquery和placeholderTypewriter.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/placeholderTypewriter.js"></script>                  
                
HTML结构

该插件可以为任意的<input>域制作占位符动画效果。

<input type="text" name="search" id="search">   
                
初始化插件

在页面DOM元素加载完毕之后,可以通过placeholderTypewriter()方法来初始化该插件。

//要显示的文本
var placeholderText = [
    "Where would you like to go?",
    "Amsterdam?", 
    "Paris?", 
    "Berlin?", 
    "London?", 
    "New York?", 
    "San Francisco?"
  ];
//初始化插件
$('#search').placeholderTypewriter({text: placeholderText});              
                

配置参数

placeholderTypewriter.js插件的可用配置参数有:

参数 默认值 描述
delay 50ms 打字的速度。
pause 1000ms 句子与句子之间的延迟时间。
text 一个数组,每个项都是要显示的文本。

placeholderTypewriter.js插件的github地址为:https://github.com/bdiekert/jquery-placeholder-typewriter