[关闭]
@Wangww0925 2019-08-07T03:24:52.000000Z 字数 852 阅读 201

六位密码输入框

插件

效果图

image_1d1qip7f56e81o1o1tck10dkval9.png-4.6kB

demo下载

使用文档

options 可用参数说明

  1. container       - 容器：'#box' | '.box'等
  3. focusStyle      - 选中样式，默认ff8200【可在css中修改】
  5. len             - input的个数，默认6
  7. valText         - 显示的内容，默认*
  9. style           - 显示input样式【整体样式可在css中修改】
  10.     - fontSize          - 默认24px
  11.     - width             - 默认36px
  12.     - height            - 默认36px
  13.     - paddingTop        - 默认0px
  14.     - ...               - 根据自身需求增加

options 内回调函数

  1. blurFun         - 失去焦点回调
  2. inputFun        - 监听数据变化回调
  3. callback        - getEevent 逻辑处理函数回调【该函数中使用 focus、blur、input， 如要另外增加内容可写在该回调中】

使用步骤

  1. 1、 引入 pwdInput.css
  2. 2、 引入 pwdInput.js
  3. 3、 调用 new pwdInput('#box')

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body > div{
  8.             width: 500px;
  9.             margin: 50px auto;
  10.         }
  11.     </style>
  12.     <link rel="stylesheet" href="pwdInput.css">
  13. </head>
  14. <body>
  15.     <div id="box"></div>
  17.     <script src="pwdInput.js"></script>
  18.     <script>
  19.         // 使用
  20.         new pwdInput('#box',{
  21.             len: 7,
  22.             valText: "·",
  23.             style:{
  24.                 paddingTop: '5px'
  25.             },
  26.             callback: function (){
  27.                 console.log("事件处理的回调")
  28.             }
  29.         })
  30.     </script>
  31. </body>
  32. </html>

作者 wendy
2019 年 1月 22日

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注