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

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

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

5个回答

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

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

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
密码输入框显示明文密码
在做登录窗口的时候,通常会遇到需要显示密码这一功能,这一功能很简单。 为checkbox添加事件监听器如下: vision_password.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(vision_password.isChec
一个存储过程实现的效果如何用一句sql语句实现
[code=SQL]rncreate proc [dbo].[sp_filter_customer]rn(rn@UserName nvarchar(256)rn)rnasrnbeginrnrn if exists(select 1 from AccessRule where name=@UserName)rn select id,name from view_customerrn where customer_categoryrn inrn (rn select category from Custom_DataFilterrn where username=@UserNamern ) rn rn elsern select id,name from view_customerrnendrn[/code]rnrn存储过程的方式如下,主要就是先判断AccessRule中有没有该用户的数据,如果有使用数据过滤,没有就读取所有的数据?rn现在如果要用一句sql语句来判断该如何实现?rn谢谢
QQ邮箱中的frame效果如何用web标准来实现?
1:最外面的页面(框架页)没有横竖滚动条,右边(frame)子页面根据内容高度自动有竖滚动条...???rn2:左边菜单栏根据窗口高度自动有竖滚动条...如果窗口放大就没了 以缩小就有了...???rnrn有劳 大虾 说说他的实现原理??rn我用frame及隐藏滚动条的方式 效果不尽人意 而且浏览器一变就失效了!!!rnrn
想要js日历代码,显示效果如:http://xx.yqiang.com/rili.jpg
rnrn各位有没显示效果如:http://xx.yqiang.com/rili.jpg 的js日历代码,急用,拜托了!!!
windows桌面图标移动的效果如何用MFC实现?
windows桌面上的图标,用鼠标左键拖动,产生一个发虚的透明图标,并随鼠标而移动,这种效果如何用mfc实现呢?rnrn曾经尝试过响应WM_LBUTTONDOWN,WM_MOUSEMOVE,WM_LBUTTONUP,可以实现位图按钮等控件随鼠标移动而移动,但透明效果如何实现呢?rnrn尝试过用CButtonST类,静态的时候按钮为透明,但一移动背景就不对了。先刷新背景,再显示位图,虽然可以实现移动的透明按钮,但闪烁十分严重。rnrn各位版友有没有比较完美的解决方案,最后做个简单的Demo共享一下。这个问题网上很多人问,也很多人答,但总找不到详细、完美的解决方案。rnrn期待中……
请教高手这样的图片效果如何用photoshop实现
http://www.dict.cn/ 在线词典的logo图片。rn请问这个镜面倒影的效果是如何实现的?
急:请问:这样随机的效果如何用c++实现哪?
给连接权值w随机赋初值rnfloat bedlam(void)rnrnfloat k;rnsrand((unsigned)time(NULL));rnk=(float)rand()/1000.0;rnwhile(k>1.0);rnk=k-1.0;rnreturn(k);rnrn调用发现间隔的时间太短,所赋的初值太接近了.rn比如,产生10个随机数:rn0.914、0.944、0.973、0.993、0.916、rn0.935、0.955、0.978、0.9、0.933rn再产生一次:rn0.982、0.918、0.95、0.98、0.906、rn0.929、0.952、0.981、0.914、0.91rn可以肯定他们的确是不同的,是根据时间不同的,但是他们并不很随机。这就影响了我后面算法的收敛速度,由MATLAB产生的10个随机数(rand(1,10)):rn0.5828、0.4235、0.5155、0.3340、0.4329、rn0.2259、0.5798、0.7604、0.5298、0.6405rn再一次产生10个随机数:rn0.2091、0.3798、0.7833、0.6808、0.4611、rn0.5678、0.7942、0.0592、0.6029、0.0503rn请问:这样随机的效果如何用c++实现哪?
怎样在网页中显示源代码效果如VS.NET中的一样.
看到一个blog里面帖出的源码不但有行号还可以折叠,问有没有这样的工具可以使VS里面的源码效果不变的转换成htmlrn效果如下:rnhttp://crazywill.cnblogs.com/archive/2005/11/07/270819.html
android 下拉框Spinner如何自定义效果如html中的select
android中的下拉框点击之后系统自带样式rn[code=Java]rn//设置下拉列表的风格 simple_spinner_dropdown_itemrn adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);rn[/code]rn全都是显示在屏幕中间,宽度占满父控件rn我想显示成html中的select 效果,下拉菜单显示在控件下方,并且和控件同宽。rn希望大侠不吝指点。rn
明文变密文和密文变明文
明文变密文和密文变明文 对于学习如何用密钥把明文变密文,再解密很有用!
写入文件后,个别字符变成了?号
.net中从数据库中读取数据写入文件后,个别字符变成了?号,怎么解决?数据库是2005。
要制作的效果如图示
要制作的效果如图示
密码输入框的明文暗文转换
&amp;lt;input type=&quot;password&quot; placeholder=&quot;请输入密码&quot; id=&quot;password&quot;&amp;gt; &amp;lt;div class=&quot;see-password&quot;&amp;gt; &amp;lt;i class=&quot;see-password-icon&quot;&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;i class=&quot;n
设置密码输入框明文和密文切换
1.笨方法是设置标志位或者根据isSelected属性、isChecked属性什么的来改变。 2.我想的是,既然xml中有android:inputType这个属性,那么代码中直接用getInputType()方法得到它的输入类型,然后和它的各种属性比较不就能判断嘛,于是我就这么干了 //切换密码是否可见 case R.id.pwdIsVisible: int isVisible
我们在设置密码的时候,输入的都是小黑点,请问这种效果如何用VC实现???
up
请问图片的渐变效果如何在java中实现
启动画面如何实现图片的渐变效果
extjs 如何用grid展示图片,效果如附件图
extjs 如何用grid展示图片,效果如附件图
请问这种效果如何用sql语句完成
[img=https://img-bbs.csdn.net/upload/201708/04/1501807133_589943.png][/img]rnrn请问表二中的供应商如何根据表一的数据进行更新,条件就是品号和单号都相同,需要批量更新
自定义Spinner,效果如腾讯QQ输入账号下拉框
Android Studio工程,自定义Spinner,效果如腾讯QQ输入账号下拉框
direct3d中怎样实现文字的滚动,效果如HTML中的marquee
如题
Html链接中显示'%'号
     我在用C生成Html文件的时候发现链接中存在%**这类的字符在浏览器上都会被转换(*代表字母或数字),如%E5就会转换成汉字!因此链接中有%号就总是打开失败,如%E5%91%BD%E4%BB%A4%E5%8F%82%E6%95%B0.txt。经过试验感觉E5等应该是实际的ASCII码值,所以如果想在链接中使用%,就必须采用%号的ASCII码'%25'代替'%'号。 string s...
Qt显示一个控件一秒后消失.
大家好,我想实现这样的一个效果: 一个小方块,等点击某个操作后,在屏幕的右下角显示一个反馈信息,等一秒后消失.有点rn类似android手机里的退出提示控件ctoast,rnrn我的代码思路是这样的: 继承一个QWidget,再里面放一个定时器,等时间到后,关闭当前这个Widget,这样做放到别的类中rn构造函数还可以,可是放到普通函数中,就出现段错误,请问下这个是什么情况.rnrn我的代码如下rnrn[code=C/C++]rn#ifndef WIDGET_Hrn#define WIDGET_Hrnrn#include rn#include rn#include rn#include rn#include rn#include rnclass CToast : public QWidgetrnrn Q_OBJECTrnpublic:rn explicit CToast(const int timeMs=10000,const QString string="set success!",QWidget *parent = 0);rn ~CToast();rnprivate slots:rn void closewidget();rnprivate:rn QLabel *label;rn QGroupBox *grpWidget;rn QTimer *timer;rn;rn#include rnclass Widget : public QWidgetrnrn Q_OBJECTrn rnpublic:rn Widget(QWidget *parent = 0);rn ~Widget();rnprivate slots:rn void timerouttest();rnprivate:rn QTimer *m_timer;rn;rnrn#endif // WIDGET_H[/code]rnrnrnrn[code=C/C++]rn#include "widget.h"rn#include rn#include rn#include rn#include rn#include rn#include rn#include rn#include rnCToast::CToast(const int timeMs, const QString string, QWidget *parent)rn : QWidget(parent)rnrn setWindowFlags(Qt::FramelessWindowHint); //设置无windows标题rnrn setFixedSize(80,40);rn move(200,150); rn timer=new QTimer;rn connect(timer,SIGNAL(timeout()),this,SLOT(closewidget()));rn timer->start(timeMs);rnrn setStyleSheet("background-color: black;border-radius:15px");rnrn label=new QLabel((string));rn label->setStyleSheet("color:white");rnrn QGridLayout *rowWin=new QGridLayout;rn rowWin->setContentsMargins(5,5,5,5);rn rowWin->addWidget(label,0,0);rn setLayout(rowWin);rn rnrn CToast::~CToast()rn rn delete label;rn delete grpWidget;rn delete timer;rn timer=NULL;rn rn void CToast::closewidget()rn rn timer->stop();rn close();rn delete this;rn rnrnWidget::Widget(QWidget *parent)rn : QWidget(parent)rnrn m_timer=new QTimer();rn connect(m_timer,SIGNAL(timeout()),this,SLOT(timerouttest()));rn m_timer->start(1000);rnrnrnWidget::~Widget()rnrn rnrnvoid Widget::timerouttest()rnrn CToast *to1=new CToast(1000*1,"lajdsajs");rn[/code]
HTML支付密码输入框(已实现)
密码输入框思路梳理:         a:用lable包裹li标签和input框;         b:input设置最大输入值为6;         c:用input框的输入值分别遍历到6个li标签中; 代码需要引入jQuery代码:http://libs.baidu.com/jquery/2.1.4/jquery.min.js HTML代码如下: &amp;lt;!DOCTYPE htm...
html中如何用js实现提交表单
办法1.同一个页面中建立两个表单 各自提交: &amp;lt;form action=&quot;?&quot; name=&quot;form1&quot; id=&quot;form1&quot;&amp;gt; &amp;lt;!-- 表单内容 --&amp;gt; &amp;lt;input type=&quot;submit&quot; /&amp;gt; &amp;lt;/form&amp;gt; &amp;lt;form action=&quot;?&quot; name=&quo
求助,如何使用js删除行,效果如下图所示
[img=http://img.my.csdn.net/uploads/201303/30/1364616331_4958.jpg][/img]
C#中textbox控件实现输入字符筛选后显示
在输入文本框中,许多时候需要限制输入的内容,比如只能输入十六进制的数字,这时就要在按键输入之后先判断是否符合条件然后在显示出来。 首先在textbox控件中启用KeyPress功能来截获按键事件。 进入按键事件之后将按键参数e.Handled = true; 设置,此时文本框不在自动获取按键值了。 private void 发送显示区_KeyPress(object sender,
如何制作出带有显示*号的密码输入框
各位大侠,小弟想在界面中制作出带有显示*号的密码输入框,但在palm的construct中好像没有这种控件(也可能我没有找到),所以不知如何是好,请大侠们指条明路吧。rn多谢了!
弹出式登陆框,效果如百度
弹出式登陆框,效果如百度。做的是登陆,注册,找回密码,代码很简单。下载看看。
效果如属性tooltiptext一样的控件
当用户操作错误的时候,希望可以弹出一个如tooltiptext效果一样的提示框,让它停留一两秒让用户看到自己操作错了,请问这是什么控件?能做这种效果的话就感觉我写的程序更爽了。
简单效果如何在firefox下通过
rn rn rn rn 1rn 2rn 3rn 4rn 5rn 6rn 7rn 8rn 9rn rn rn 11rn 12rn 13rn 14rn 15rn 16rn 17rn 18rn 19rn rn rnrn rnrnrn-------------------------上面代码如何在firefox下通过,求高手帮忙,用jquery也可
鼠标移至标题,显示详细介绍,效果如http://bt2.btchina.net/
我想做出这种效果,但不知如何入手,向各位讨教.
js 特效 html 特效 输入字符的控制
js 特效 html 特效 输入字符的控制 js 特效 html 特效 输入字符的控制
html中跑马灯的实现效果与代码
html中跑马灯的实现效果与代码,包含基本语法,属性及设置,并且有效果展示.
这种加粗 效果如何在FF下执行....
[code=HTML]rnrnrn rn 这种加粗 效果如何在FF下执行....rnrnrnrn rnrnrn[/code]rnrn这种加粗 效果如何在FF下执行....???rnrn
如何使得在edit中输入的字符全部显示成为*号?
在edit中输入数据,rn想把输入的字符串隐掉,rn显示给别人看到的只是*号的形式!rn请问如何实现!
如何在vs2005中将密码输入框中的输入值显示为*号??? 一个.net小菜鸟的提问
如何在vs2005中将密码输入框中的输入值显示为*号??? 一个.net小菜鸟的提问
html中关于密码输入框的问题
我打算在密码输入框中赋于一个默认值,默认值显示的是中文的提示文字,当鼠标点击密码输入框输入密码后显示的是星号,并且可以成功的登录到系统中去,我用的是这样一段代码 实现的,可是这段代码不能成功的登录。哪位知道的达人,帮帮小弟,感激不尽!
js 实现 精确到千分之一秒
js 实现 精确到千分之一秒! 值得下载看看!资源免费,大家分享!!
怎样在ASP 中输入字符#号??
怎样在ASP 中输入字符#号??rn急!!!!!!!!!1
这种数据库结果如何用hibernate实现?
表一:plu : storeID,itemNumber是keyrn表二:ord : storeID,itemNumber,requestNumber是keyrn其中 前两个key可以关联rn如何用hibernate来描述这个结构??
相关热词 c# 去空格去转义符 c#用户登录窗体代码 c# 流 c# linux 可视化 c# mvc 返回图片 c# 像素空间 c# 日期 最后一天 c#字典序排序 c# 截屏取色 c#中的哪些属于托管机制