在html前端页面中密码输入框，输入一个字符显示明文，过一秒后再变*号的效果如何用js实现
需要实现在修改密码的业务中，在输入框输入一个字符，先显示该字符的明文，过一秒后再转变为“*”，请问这个用js该如何实现？各位高手麻烦指导。
我帮你写一下吧，别忘了采纳
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://blog.csdn.net/Vicki_/article/details/79267205
大致代码是这样子，当然代码还有待完善
<!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>
我的博客你可以看一下，应该是你想要的效果
https://www.cnblogs.com/thinkerWang/p/11613193.html