superplaceholder.js-超级输入框占位符插件,让占位文本动起来!

superplaceholder.js说明

superplaceholder.js 是一款带演示功能的超级输入框占位符 JavaScript 插件。superplaceholder.js 可以让占位文本动起来，它能够周期性的循环显示预定义的文本字符串，增强提示功能，提升用户体验。

效果可以看白露博客的侧边搜索栏，里面的占位文本是动态的，就是利用superplaceholder.js做出来的。

superplaceholder.js演示代码

<script type="text/javascript" src="http://blmoe.cn/wp-content/themes/xiu/js/superplaceholder.js"></script>
<script>
superplaceholder({
	el:sou,//这里是指你输入框的ID
	sentences:['找不到资源？','请学会用网站的搜索功能','搜不到？','请选择正确的关键词','例如：织梦模板...'],
	options:{
		letterDelay:100,//每句间隔时间
		loop:true,//循环上面的句子
		startOnFocus:false//在输入框聚焦时才开始播放，设置为 false 会自动开始播放
		}
	});
</script>

上面你可以自己修改参数，白露对 superplaceholder.js 相应的代码都做出来说明，是不是很贴心？赶快试试吧！

superplaceholder.js更多参数说明

letterDelay：各个字符显示之间的延迟时间，单位毫秒

sentenceDelay：各个句子之间的延迟时间，单位毫秒

startOnFocus：在输入框聚焦时才开始播放，设置为 false 会自动开始播放

loop：是否循环播放

shuffle：是否打乱传入的句子

showCursor：是否显示光标，默认为显示

cursor：光标字符串

superplaceholder.js配置参数

superplaceholder({
    el: document.querySelector('input'),
    sentences: [ 'Something to show', 'Another thing to show'],
    options: {
        // delay between letters (in milliseconds)
        letterDelay: 100, // milliseconds
        // delay between sentences (in milliseconds)
        sentenceDelay: 1000,
        // should start on input focus. Set false to autostart
        startOnFocus: true,
        // loop through passed sentences
        loop: false,
        // Initially shuffle the passed sentences
        shuffle: false,
        // Show cursor or not. Shows by default
        showCursor: true,
        // String to show as cursor
        cursor: '|'
    }
});

superplaceholder.js教程结束，白露只要有好的前端插件，都会分享给大家的~ 欢迎关注我！