以打字形式展示placeholder的插件

最新推荐文章于 2024-05-13 09:42:10 发布

canglingyue

最新推荐文章于 2024-05-13 09:42:10 发布

阅读量563

点赞数

分类专栏： js+jq 文章标签：插件 placeholde

本文链接：https://blog.csdn.net/canglingyue/article/details/52516052

版权

js+jq 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

这个是利用文本框的 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

canglingyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
以打字形式展示placeholder的插件

这个是利用文本框的 placeholder 属性，以打字形式展示我们自定义的文字，可当用提示用，让提示信息的展示更有趣效果演示地址演示地址：http://weber.pub/demo/160911/slh.html下载直接下载链接：http://pan.baidu.com/s/1pLs60iR 密码：idfigithub 地址github 地址：https://github.com/chi
复制链接

扫一扫

专栏目录