css带占位符的搜索框,superplaceholder.js-功能强大的超级输入框占位符插件

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

安装

可以通过bower或npm来安装superplaceholder.js插件。

bower install superplaceholder

npm install superplaceholder

使用方法

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

初始化插件

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

superplaceholder({

el: ,

sentences: ,

options: {} // 可选的自定义参数

});

例如：

superplaceholder({

el: document.querySelector('input'),

sentences: [ '要显示的占位文本', '其它一些文本信息']

});

配置参数

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: '|'

}

});

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

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

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

loop：是否循环播放。

shuffle：是否打乱传入的句子。

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

cursor：光标字符串。

css带占位符的搜索框,superplaceholder.js-功能强大的超级输入框占位符插件相关推荐

Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
js实现搜索框跳转功能
毕设篇:搜索框的逻辑实现功能说明实现搜索框的响应跳转功能,符合匹配条件跳转对应页面,不符合弹出alert提示框或跳转404页面案例实现源码提取码:love 效果展示代码 ...
实现百度搜索框提示语功能
利用百度jsonp接口实现搜索提示语. jsonp.js封装 function jsonp(url, options) {// 创建script标签var $script = document.cre ...
实训第六天：搜索框布局及功能实现，实现上下滑动
1.实现小程序天气预报搜索框 <input class='ipt' placeholder-class='pla' placeholder='请输入城市名,快速查询天气信息' bindconfi ...
【Vue实践】列表搜索框中模糊搜索功能的两种实现方式
文章目录 1.Demo演示 2.HTML结构 3.实现 3.1 基于计算属性`computed`实现 3.2 基于侦听器`watch`实现 1.Demo演示模糊搜索功能是日常开发中常见的一种功能,这 ...
HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...
模拟百度搜索框自动联想功能，原生js+jsonp轻松搞定
链接下面是我闲暇时总结的JS.CSS.算法总结,欢迎大家点赞.star-- 有趣实用的CSS效果前端博客传送门 LeetCode个人题解传送门讲解如何利用百度接口仿写一个搜索联想词功能效果 ...

css带占位符的搜索框,superplaceholder.js-功能强大的超级输入框占位符插件

css带占位符的搜索框,superplaceholder.js-功能强大的超级输入框占位符插件相关推荐

最新文章

热门文章