以打字形式展示placeholder的插件

来源：互联网发布：ubuntu使用教程pdf 编辑：程序博客网时间：2024/05/16 13:51

这个是利用文本框的 placeholder 属性，以打字形式展示我们自定义的文字，可当用提示用，让提示信息的展示更有趣

效果演示地址

演示地址：http://weber.pub/demo/160911/slh.html

下载

直接下载

链接：http://pan.baidu.com/s/1pLs60iR 密码：idfi

github 地址

github 地址：https://github.com/chinchang/superplaceholder.js

npm 安装

npm install superplaceholder

Bower 安装

bower install superplaceholder

使用

superplaceholder({    el: <input 标签元素>,    sentences: < 需要展示的placeholder 内容 >,    options: {} // 配置项});

基础版

superplaceholder({    el: document.querySelector('input'),    sentences: [ '内容1', '内容2']});

配置项

superplaceholder({    el: document.querySelector('input'),    sentences: [ '内容1', '内容2'],    options: {        // 每个字出现的时间间隔        letterDelay: 100, // milliseconds        // 两个句子之间的时间间隔        sentenceDelay: 1000,        // true 为获得焦点开始，false 为自动开始        startOnFocus: true,        // 循环句子        loop: false,        // 随机出现第一个出现的句子        shuffle: false,        // 是否显示光标，默认显示        showCursor: true,        // 光标样式        cursor: '|'    }});

示例代码

演示地址：http://weber.pub/demo/160911/slh.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div.main{            width: 1200px;            margin: 0 auto;            padding: 50px 15px;        }        input{            height: 40px;            width: 300px;        }    </style></head><body><div class="main">    <p style="font-size: 20px;">        <a style="color:red;" href="http://weber.pub" target="_blank">返回网站首页</a>    </p>    <h3>URL 输入框 </h3>    <div class="row">        <label>输入 URL:</label>        <input id="inp3" type="text" value="" placeholder="Url" autocomplete="off">    </div>    <h3>登录框实例</h3>    <div class="row">        <input id="inp1" type="text" value="" placeholder="Email" autocomplete="off">    </div>    <br>    <div class="row">        <input style="display:none">        <input id="inp2" type="password" value="" placeholder="Password" autocomplete="off">    </div></div><script src="superplaceholder.js"></script><script>    superplaceholder({        el: inp1,        sentences: [ '只有公司邮件可以通过', 'kushagra@wingify.com', 'adam@google.com' ],        options: {            loop: true        }    })    superplaceholder({        el: inp2,        sentences: [ '一个特殊字符', '一个大写字母', '比如：hjhhjAsasd*' ],        options: {            loop: true,            letterDelay: 30        }    })    superplaceholder({        el: inp3,        sentences: [ '网址示例', 'http://yahoo.com', 'www.facebook.com', 'baidu.com' ],        options: {            letterDelay: 80,            loop: true,            startOnFocus: false        }    })</script></body></html>

结尾

by Weber.pub

本文地址：http://weber.pub/以打字形式展示placeholder的插件/197.html

0 0