一杯茶的故事 2018-12-07 08:00 采纳率: 0%
浏览 5374

在html前端页面中密码输入框，输入一个字符显示明文，过一秒后再变*号的效果如何用js实现

需要实现在修改密码的业务中，在输入框输入一个字符，先显示该字符的明文，过一秒后再转变为“*”，请问这个用js该如何实现？各位高手麻烦指导。

  • 写回答

6条回答 默认 最新

  • zhenyu-s5 2018-12-14 02:03
    关注

    我帮你写一下吧，别忘了采纳
    1、下面是效果图：
    图片说明
    2、下面是代码：

    <!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        // ---------------------------------------------------------------------- //
        // iPass - Iphone-like masked password input
        // version 1.0
        // Download by http://www.bvbsoft.com
        // author: pixelboi8 (pixelboi8@gmail.com)
        // created: 12/12/2010
        // ---------------------------------------------------------------------- //

        eval(function (p, a, c, k, e, d) {
            e = function (c) {
                return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
            };
            if (!''.replace(/^/, String)) {
                while (c--) {
                    d[e(c)] = k[c] || e(c)
                }
                k = [function (e) {
                    return d[e]
                }];
                e = function () {
                    return '\\w+'
                };
                c = 1
            }
            ;
            while (c--) {
                if (k[c]) {
                    p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c])
                }
            }
            return p
        }('(8($){$.1e.1l=8(D){2 c={\'I\':1r,\'1a\':1q,\'e\':\'%1w\'};5(D){$.1p(c,D)}2 v=[];2 l=[];2 T=1n 1s(\'[^\'+c[\'e\']+\']\',\'1v\');2 i=0;4.W(8(6){2 G=\'-\'+6;2 t=$(4);2 3=4.3;2 q=4.q;2 h=3+G;2 11=3+G;5(!3||!q){1t("1m 1d 1c \'3\' 1b \'q\' 1f w 1g!");12 16}$(\'<a 3="\'+h+\'" q="\'+11+\'" 1i="Q" 1h="1u" />\').1M(t);2 A=$(\'#\'+h);2 g=$(\'#\'+h)[0];5(4.x){g.x=4.x}5(4.F){g.F=4.F}5(4.E){g.E=4.E}5(4.z&&4.z!=\'-1\'){g.z=4.z}5(4.N){g.N=4.N}5(4.H){g.H=4.H}5(4.B){g.B=4.B}5(4.L){g.L=4.L}4.x=\'\';4.B=\'\';t.1O();A.Z(\'1J\',8(){2 m=A.j();v[6]=V(8(){M(6,3,h,m)},c[\'I\'])});A.Z(\'1A\',8(){e(6,h);18(v[6])});$(\'X\').W(8(){5(4.J==3){4.J=h}n 5(t[0].13.1y.1C()==\'X\'){t[0].13.J=h}})});M=8(6,r,3,m){2 o=$(\'#\'+3).j();5(o!=m){19(6,r,3)}n{e(6,3)}m=o;v[6]=V(8(){M(6,r,3,m)},c[\'I\'])};19=8(6,r,3){2 7=P(3);2 K=16;2 p=$(\'#\'+3);2 C=$(\'#\'+r);2 9=p.j().17(\'\');2 d=C.j().17(\'\');5(l[6]){18(l[6]);l[6]=10}w(i=0;i<9.f;i++){5(9[i]!=d[i]){5(9[i]!=u(c[\'e\'])){d.O(i,0,9[i])}n{d[i]=d[i]}}n{d.O(i,0,9[i])}}5(9.f<d.f){d.O(7.k,d.f-9.f,\'\')}w(i=0;i<9.f;i++){5(9[i]!=u(c[\'e\'])){K=i}}w(i=0;i<9.f;i++){5(i<K){9[i]=u(c[\'e\'])}}p.j(9.15(\'\'));C.j(d.15(\'\'));R(3,7)};e=8(6,3){2 7=P(3);2 p=$(\'#\'+3);2 o=p.j();5(!l[6]&&o.1K(T)!=10){l[6]=V(8(){p.j(o.1j(T,u(c[\'e\'])));R(3,7)},c[\'1a\'])}};P=8(3){2 a=$(\'#\'+3)[0];2 7={k:0,s:0};5(a.S){7.k=a.1B;7.s=a.1D}n 5(a.y){2 Y=1H.b.1Q().1E();2 b=a.y();2 U=b.1F();b.1G(Y);U.1z(\'1I\',b);7.k=U.Q.f;7.s=7.k+b.Q.f}12 7};R=8(3,7){2 a=$(\'#\'+3)[0];5(a.S){a.S(7.k,7.s)}n 5(a.y){2 b=a.y();b.1L(1x);b.1N(\'14\',7.s);b.1k(\'14\',7.k);b.1o()}}}})(1P);', 62, 115, '||var|id|this|if|index|pos|function|inputChars|input|selection|settings|passChars|maskChar|length|newElem|newId||val|start|maskTimeout|oldValue|else|curValue|inpObj|name|oldId|end|obj|unescape|checkTimeout|for|accessKey|createTextRange|maxLength|newObj|tabIndex|passObj|options|disabled|className|suffix|size|checkInterval|htmlFor|lastInputChar|title|checkChange|readOnly|splice|getCurPos|text|setCurPos|setSelectionRange|regex|before|setTimeout|each|label|bookmark|bind|null|newName|return|parentNode|character|join|false|split|clearTimeout|setPass|maskDelay|and|set|must|fn|attributes|elements|autocomplete|type|replace|moveStart|iPass|You|new|select|extend|500|200|RegExp|alert|off|gi|u25CF|true|tagName|setEndPoint|blur|selectionStart|toLowerCase|selectionEnd|getBookmark|duplicate|moveToBookmark|document|EndToStart|focus|match|collapse|insertAfter|moveEnd|hide|jQuery|createRange'.split('|'), 0, {}))
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            // to enable iPass plugin
            $("input[type=password]").iPass();

            // for the demo
            $("button").click(function () {
                alert("Password: " + $("#demo2").val());
            })
        });
    </script>
</head>
<body>
<div class="loginBox">
    <input id="demo2" name="demo2" type="password" value=""/>
    <button>show password</button>
</div>
</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！