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

立即领取

最高 ¥2000 红包 限量领取

云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

superplaceholder.js说明

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

效果可以看白露博客的侧边搜索栏,里面的占位文本是动态的,就是利用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教程结束,白露只要有好的前端插件,都会分享给大家的~ 欢迎关注我!

赞 (5) 打赏
  • 欢迎小伙伴加入,本站原创文章交流群:进站必看
  • 本作品是由 白露博客 会员 白露 投递的作品。
  • 网络媒体或个人转载请务必署名并注明出处和链接!:http://blmoe.cn/526.html
  • 凡是原创作品,禁止再次修改后发布;任何商业用途均须联系作者。如未经授权用作他处,作者将保留追究侵权者法律责任的权利。

评论 0

收起表情
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

「赠人玫瑰,手留余香」

支付宝扫一扫打赏

微信扫一扫打赏