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

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

Tony21
一杯茶的故事 没有人会吗?
一年多之前 回复

6个回答

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

Tony21
一杯茶的故事 谢谢你的支持,不过我要的不是这个效果,我要的效果如题所述。
一年多之前 回复

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

<!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>

这个主要用到一个中间器的思想。
可以先设置一个空数组,把输入到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>

我帮你写一下吧,别忘了采纳
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>

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问