Tony21
一杯茶的故事
采纳率0%
2018-12-07 08:00 阅读 4.7k

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • Tony21 一杯茶的故事 2018-12-07 08:07

    小弟我暂缺分值,跪求高手指导。。。

    点赞 评论 复制链接分享
  • ththcc CZ__ 2018-12-07 10:04
  • jslang 天际的海浪 2018-12-07 13:07

    大致代码是这样子,当然代码还有待完善

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    <style type="text/css">
    
    .password {
        display: inline-block;
        position: relative;
    }
    .password input {
        position: absolute;
        left: 0;
        top: 0;
        font-family: Consolas;
    }
    .password .p {
        z-index: 2;
        background-color: transparent;
        color: transparent;
    }
    </style>
    </head>
    <div class="password">
        <input type="text" class="p" name="test" />
        <input type="text" class="t" />
    </div>
    <script type="text/javascript">
    (function () {
        var p = document.querySelector(".password .p");
        var t = document.querySelector(".password .t");
        var timer;
        p.oninput = function () {
            t.value = p.value.replace(/.(?!$)/g,"*");
            clearTimeout(timer);
            setTimeout(function(){
                t.value = p.value.replace(/./g,"*");
            }, 1000);
        }
    })();
    </script>
    </body>
    </html>
    
    
    点赞 评论 复制链接分享
  • candy_tity 陈田田 2018-12-10 07:43

    这个主要用到一个中间器的思想。
    可以先设置一个空数组,把输入到input框里的值逐个存储进去,当然如果删除的话,也是逐个移除出去。
    然后执行input框改变时的一个检测。
    首先判断下是新增了还是删除了。如果新增,中间数组添加一个元素。如果删除,中间数组减去一个元素。
    然后再执行一个setTimeout方法。判断input框里面值的长度。将其替换为等长的星号即可。
    另外,在提交表单的时候,只需要将中间数组转为字符串即可。
    以下是完整代码。如果有帮助,请点击采纳。谢谢。

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <input type="text" name="" id="password">
    <script type="text/javascript" src="http://www.htmleaf.com/js/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var val = [];
            $("#password").on('input propertychange',function(){
                var val_l = val.length;
                var l = $(this).val().length;
                if(val_l < l){
                    console.log('新输入了一个字符');
                    console.log($(this).val().charAt(l-1));
                    val.push($(this).val().charAt(l-1))
                }else if(val_l > l){
                    console.log('删除了一个字符')
                    val.splice(val_l-1, 1);
                }
                // 存储的数组
                console.log(val);
                // 最后提交表单时的input框里面的值
                console.log(val.join(''))
                setTimeout(function(){
                    str = ''
                    for(var i = 0; i < l; i++){
                        str += '*'
                    }
                    $("#password").val(str)
                },1000)
            });
        })
    </script>
    </body>
    </html>
    
    点赞 评论 复制链接分享
  • qq_36022290 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>
    
    
    点赞 评论 复制链接分享
  • max74xiang max74xiang 2019-09-30 16:40

    我的博客你可以看一下,应该是你想要的效果
    https://www.cnblogs.com/thinkerWang/p/11613193.html

    点赞 评论 复制链接分享

相关推荐