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

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

0
Tony21
一杯茶的故事 没有人会吗?
7 个月之前 回复

5个回答

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

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

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

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

0

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

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

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
AS3密码文本框(输入后先显示明文1秒以后显示星号)
AS3密码文本框(输入后先显示明文1秒以后显示星号)
html input密码显示为*号
html input密码显示为*号 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html encoding=&quot;utf-8&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; *{margin:0;padding:0} input{font:14px Monospace;h...
前端页面和js
echarts高看一点的图表和现成的页面,需要直接拿去 第一个页面 https://download.csdn.net/download/weixin_43283487/10907708 第二个 https://download.csdn.net/download/weixin_43283487/10907716 第三个https://download.csdn.net/download/we...
小白必看!前端密码表单输入内容变星号这样做!!!!我引入了 jquery
在前端项目中经常有这样的需求!就是把密码输入表单内容变为星号! 有的同学会说简单!type=’password’ 不就得啦! 但是!当今浏览器解析时大多会把输入的内容变为“·”点,而不是星号! 这本来无伤大雅!但有的产品经理态度强硬!说“我就要星号!* 行!你说的算 写js呗!我引入了JQ 写起来也很简单! &amp;amp;lt;input id=&amp;quot;a&amp;quot; type=&amp;quot;text&amp;quot;/&amp;amp;gt; ...
js 输入框密文转明文
在我们电脑开机输入密码或者一些网站的登录页面中,在输入框输入密码,会显示******,防止旁人会看到密码。而当自己密码太长,输入到一半时自己输乱了,想要知道自己输入了什么时,可以通过点击一下旁边的按钮来查看。 当鼠标按下时所输入密码为明文,松开就恢复****** 首先我们在html中写入一个输入框和一个按钮,分别给它们一个id来连接js。 可以通过event事件中的onmouse
js 特效 html 特效 输入密码后才能进入页面
js 特效 html 特效 输入密码后才能进入页面 js 特效 html 特效 输入密码后才能进入页面
Qt---实现在QLineEdit中输入密码时先显示明文,然后显示*号
//==>QPasswordLineEdit.h #ifndef QPASSWORDLINEEDIT_H #define QPASSWORDLINEEDIT_H #include class QPasswordLineEdit : public QLineEdit { Q_OBJECT public: QPasswordLineEdit(QWi
jQuery实现input密码输入框显示为星号“*”
input密码框显示为星号“*” &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;input密码框显示为星号“*”&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt
关于密码框明文密文的心得
输入框密码的显示与隐藏 在逛博客的时候发现大家对密码的明文,密文切换有疑惑,正巧最近在做手机端页面的时候碰到了密码的显示与隐藏,在这里就跟小伙伴们分享下。 在这里我整理了两种方法,亲测有效这里写代码片 方法一 通过js改变input框的 type属性来切换明文,密文 这里需要注意 input框的属性修改 不能直接使用attr() html部分 &amp;lt;div class=&quot;f...
密码输入框显示明文密码
在做登录窗口的时候,通常会遇到需要显示密码这一功能,这一功能很简单。 为checkbox添加事件监听器如下: vision_password.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(vision_password.isChec
js、jquery分别实现点击密码输入框密码显示和隐藏
很多密码框都有个眼睛标记,点击能显示密码。原理就是点击切换password为text等显示
防止密码输入错误, 密码明文显示功能
欢迎Follow我的GitHub, 关注我的CSDN. 在使用App的时候, 首次都需要输入密码. 有些人为了安全性, 密码较长, 偶尔会输入错误; 有些人忘记了密码, 需要多次尝试, 但又不知道是输入错误, 还是密码错误, 这些都会影响用户体验.这一点, 移动端设计师们早有准备, 因为手机的私密性较强, 在输入密码时, 可以提示用户显式输入, 增强准确性, 提升体验. 这些当然是有成本的, 需要额
设置密码输入框明文和密文切换
1.笨方法是设置标志位或者根据isSelected属性、isChecked属性什么的来改变。 2.我想的是,既然xml中有android:inputType这个属性,那么代码中直接用getInputType()方法得到它的输入类型,然后和它的各种属性比较不就能判断嘛,于是我就这么干了 //切换密码是否可见 case R.id.pwdIsVisible: int isVisible
【代码笔记】HTML+CSS+JavaScript实现密码输入框显示文字
原理: 通过设置一个input为password,默认display为none,再设置一个input为text设置为block,利用js脚本控制显隐。 具体思路: 给type类型为text的输入框加一个点击事件,点击事件是设置text类型输入框的display为none,设置password类型输入框为block,并获取焦点。 给type类型为password的输入框加一个失去焦点事件,失
Qt自定义密码框,先显示后隐藏
现在很多应用在密码输入时,会先显示一段时间,大概几百毫秒,然后再变成星号或者圆点隐藏起来。这样做的好处是,可以让密码输入者看到自己输入的字符,同时又防止密码被偷窥。但是Qt自带的密码输入框,要么输入时立即变成圆点,要么全部输入完后再一起变成圆点。 更详细的介绍参考我的博客。
Android中输入密码明文密文切换功能的实现
引言:当我们在进行项目开发的过程中难免会进行登陆及注册功能的实现,在这过程中难免会有密码明文密文切换的需求,那么现在我就给大家分享一下我自己封装的一个方法,非常简单,如果项目中有这样的需求直接套用就可以了。下面就直接粘帖代码了。/** * 切换明文密码 * @param editText 需要切换显示的EditText数据 * @param showImageView
HTML5表单中password输入框的文字显示与隐藏实现
HTML5表单中对于密码输入框password类型可以隐藏用户输入的内容,但有时候会用到允许用户自由显示或者隐藏输入框内容: 要实现这个功能首先想到的是用js动态改变input的type类型,觉得将type = password变成type = text隐藏的密码就会显示,但是实际上却实现不了,没有效果,所以,只能换一个思路:放两个input,一个是password,一个是text,共同监
使用javascript和jquery两种方法,实现密码明文和密文的转换
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 方法一:js >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>   function mi() { var temp=document.getElementByI
javascript实现把input password的默认的黑圆点变成“*”号,并保存输入值
asdf       $(document).ready(function () {         var i = 0;         var value="";         $("#txtCustomsCode").keyup(function (e) {//给所需要处理的文本框处理keyUp事件              e = e || window.event;
密码框输入密码延迟隐藏
实现这个效果,需要引用jQuery以及一个叫做iPass.packed的js插件。 show password $(document).ready(function(){ // to enable iPass plugin $("input[type=password]").iPass(); // for the demo $("button").
angularjs2.x 密码隐藏显示的实例
angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text。首先,输入框的类型判断;&amp;lt;ion-input type=&quot;{{pwshow?'text':'password'}}&quot; placeholder=&quot;输入密码&quot;&amp;gt;&amp;lt;/ion-input&amp;gt;然后,添加眼睛的...
C# 加密密码输入框TextBox
基于TextBox基类编写的密码框,用spyxx工具探测出密码全部为“*”,实际使用时,密码存储在pwdText变量下,尚未完善,暂不知有没有屏蔽TextBox自身的Text的方法,此方法实现就更完美了。无需资源分,免费下载,供讨论,源码可加QQ398061026索取,加好友注明CSDN.pwdTextBox。谢谢。 添加工具栏的方法就不用提了吧!这个大家都会!不会请百度“自定义控件”,谢谢。
html input密码显示为“*”
1. 功能需求:HTML中,在input password输入框中输入字符将默认显示为“实体圆点”,但这里要求将实体圆点字符替换成“*”号显示。 2. 局限:鼠标光标非IE浏览器不一定显示,选择多个字符时未有视觉上的区分,功能没有影响;不支持中文输入。 3. 实现:通过两个input框实现,设置字符字体为等宽字体;其中真正的密码输入框设置为透明且遮盖住另一输入框,将非密码输入框的字符依
angularJS密码输入
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script type="text/javascript" src="../jquery-1.11.1/jquery-1.11.1.js">script> script type="text/javascript" src="../
密码框明文暗文切换
显示密码 function aaa() {     var passType = document.getElementById('pw').type;     if(passType == "text"){         document.getElementById('pw').type = "password";     }else{         document.getE
自定义view---强大的密码输入框
自定义view---强大的密码输入框 我司之前有个需求,要求类似支付宝那样的密码支付,产品要求输入的当前字符需要是明文密码,1s后转换为圆点,原本想网上那么多密码输入框,肯定没问题,结果UI一出图就懵逼了,翻遍了各个角落,都找不到类似的密码输入框,没办法,自己写吧。 使用方法,在gradle中添加:compile ‘com.rokudoll:PswText:1.0.0’即可使用 当然绘制
html5+css实现六位数字密码输入对话框(类似支付宝,微信)
先来看看原型图:直接上代码:html&amp;lt;div class=&quot;common-part pay-part&quot;&amp;gt; &amp;lt;div class=&quot;common-dialog pay-dialog&quot;&amp;gt; &amp;lt;div class=&quot;dialog-title&quot;&amp;gt;请输入支付密码&amp;lt;/div&amp;gt; &amp;l
前端技术(2) : 1秒后消失的提示框
需引入 jQuery, 下载 jquery-1.11.3.min.js   图标下载     css   .i_class-alert { width: 30px; height: 30px; display: inline-block; margin-top: -5px; background: url(http://hbkj-pc-web...
swift 密码输入框明暗问切换
一、视图控件class ZJFieldView: UIView ,UITextFieldDelegate{    override init(frame: CGRect) {        super.init(frame: frame);        self.addSubview(self.leftImgView);        self.addSubview(self.centerFei...
calendar点击输入框出现日历,点击日期,输入框写入对应的日期(html+js的日历,良好的界面,可以有多种显示方式)
calendar点击输入框出现日历,点击日期,输入框写入对应的日期(html+js的日历,良好的界面,可以有多种显示方式) calendar点击输入框出现日历,点击日期,输入框写入对应的日期(html+js的日历,良好的界面,可以有多种显示方式) JS实现的日期加时间选择器,更多日期选择,时间选择,JS日期,JS时间代码
c#中inputbox密码框
c# inputbox 密码框 c# inputbox 密码框
实现密码输入框小眼睛的功能
最近上课说了前端HTML和javascript,以前只是初略学习,现在需要做一个小项目,每个人写些页面,因为对前端不太了解,写起来很吃力啊。但是一点一点学习。 用的是bootstrap框架。做一个登陆页面,要实现输入框点击小眼睛可以看见密码明文。 如图,HTML代码是: 四方考试系统 用户登录
VUE 密码明暗文交互
输入框代码:   &amp;lt;input :type=&quot;inputType&quot; placeholder=&quot;钱包密码&quot; class=&quot;input-1&quot; v-model=&quot;password&quot;&amp;gt; 直接给利用vue的 :type 给定一个初始值    inputType 然后下方设定一个按钮  点击改变 inputType 的值就可以了 当然 这个按钮是需要绑定值的  因为vue 是以数据驱动...
微信小程序例子——使用input组件实现密码框
微信小程序教程——使用input组件实现密码框
仿微信密码输入(可输入明文)
比较流行的是githup上的第三方的开源项目 可是使用起来太庞大,自定义的edittext,实现的效果与微信密码输入效果类似,简单轻便 可以直接使用
Js、Jquery密码输入框的密码显示与隐藏
                                            Js、Jquery密码输入框的密码显示与隐藏                1、基本理解:    鼠标左键按下去时,把输入框的属性改为text;鼠标左键松开时,把输入框的属性改为password2、html代码:&amp;lt;html&amp;gt;    &amp;lt;head&amp;gt;        &amp;lt;meta http-...
JS每隔1秒输出一组新的随机数
JS每隔1秒输出一组新的随机数
EditText设置密码显示明文及隐藏切换
显示密码格式: mEditText.setTransformationMethod(PasswordTransformationMethod.getInstance()); 明文显示: mEditTex.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
点击按钮出现60秒倒计时js代码
无标题文档            var countdown=60;  function settime(val) {  if (countdown == 0) {  val.removeAttribute("disabled");     val.value="免费获取验证码";  countdown = 60;  } else {  val.setAttrib
密码框的明密文(显示和隐藏) 显示
最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type=”password”就可以了,近期因为要涉及到显示隐藏状态的切换. 样式代码如下: 注: 1.样式展示(): ul> li class="phone bgImg"> input type="text" id="phone" maxlengt
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 web前端页面开发教程 数据库中课程号