表单/表格

superplaceholder - 超级输入框占位符插件

也想出现在这里?联系我们
创客云

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

使用方法

使用该插件需要在页面中引入 superplaceholder.js 文件。

也想出现在这里?联系我们
创客主机
  1. <script type="text/javascript" src="js/superplaceholder.js"></script>

初始化插件

使用 superplaceholder.js 插件的基本语法格式为:

  1. superplaceholder({
  2.     el: <target_input_element>,
  3.     sentences: <array_of_texts>,
  4.     options: {} // 可选的自定义参数
  5. });

例如:

  1. superplaceholder({
  2.     el: document.querySelector('input'),
  3.     sentences: [ '要显示的占位文本', '其它一些文本信息']
  4. });

配置参数

  1. superplaceholder({
  2.     el: document.querySelector('input'),
  3.     sentences: [ 'Something to show', 'Another thing to show'],
  4.     options: {
  5.         // delay between letters (in milliseconds)
  6.         letterDelay: 100, // milliseconds
  7.         // delay between sentences (in milliseconds)
  8.         sentenceDelay: 1000,
  9.         // should start on input focus. Set false to autostart
  10.         startOnFocus: true,
  11.         // loop through passed sentences
  12.         loop: false,
  13.         // Initially shuffle the passed sentences
  14.         shuffle: false,
  15.         // Show cursor or not. Shows by default
  16.         showCursor: true,
  17.         // String to show as cursor
  18.         cursor: '|'
  19.     }
  20. });

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

sentenceDelay:各个句子之间的延迟时间,单位毫秒

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

loop:是否循环播放

shuffle:是否打乱传入的句子

showCursor:是否显示光标,默认为显示

cursor:光标字符串
Github 地址为:https://github.com/chinchang/superplaceholder.js

资源下载此资源下载价格为1立即购买,VIP 免费

演示地址 下载地址
收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!