怎样用js在点击文本框时，将其变为密码框？
3个回答
展开全部
<body><input type="text" id="pwd1" value="[密码]"/>
<input type="password" id="pwd2" value="" style="display:none;"/>
<script>
(function() {
var pwd1 = document.getElementById("pwd1");
var pwd2 = document.getElementById("pwd2");
pwd1.onfocus =function() {
pwd1.style.display ="none";
pwd2.style.display ="";
pwd2.focus();
};
pwd2.onblur =function() {
pwd1.style.display ="";
pwd2.style.display ="none";
};
})();
</script>
</body>
通过隐藏 。。。
或者：
<script>
window.onload = function(){
var pwd = document.getElementById("pwd");
pwd.onfocus= function(){
if(this.value == "请输入密码"){
pwd.setAttribute('type','password');
this.value = "";
}
}
}
</script>
</head>
<body>
<form>
<input type="text" value="请输入密码" id="pwd"/>
</form>
</body>
</html>
<input type="password" id="pwd2" value="" style="display:none;"/>
<script>
(function() {
var pwd1 = document.getElementById("pwd1");
var pwd2 = document.getElementById("pwd2");
pwd1.onfocus =function() {
pwd1.style.display ="none";
pwd2.style.display ="";
pwd2.focus();
};
pwd2.onblur =function() {
pwd1.style.display ="";
pwd2.style.display ="none";
};
})();
</script>
</body>
通过隐藏 。。。
或者：
<script>
window.onload = function(){
var pwd = document.getElementById("pwd");
pwd.onfocus= function(){
if(this.value == "请输入密码"){
pwd.setAttribute('type','password');
this.value = "";
}
}
}
</script>
</head>
<body>
<form>
<input type="text" value="请输入密码" id="pwd"/>
</form>
</body>
</html>
追问
pwd.setAttribute('type','password');
这句代码在IE下有错误啊
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HMLT>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container{
position: relative;
height: 100%;
overflow-y: auto;
}
#container input{
position: absolute;
left: 100px;
top: 100px;
}
</style>
<title>暴风测试页面</title>
</head>
<body>
<div id="container">
<input id='input2' type="password">
<input id='input1' type="text" value="请输入密码">
</div>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id);};
$('input1').onfocus = function(){
this.style.display = 'none';
$('input2').focus();
}
$('input2').onblur = function(){
if(!this.value||this.value.length==0) $('input1').style.display = 'block';
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#container{
position: relative;
height: 100%;
overflow-y: auto;
}
#container input{
position: absolute;
left: 100px;
top: 100px;
}
</style>
<title>暴风测试页面</title>
</head>
<body>
<div id="container">
<input id='input2' type="password">
<input id='input1' type="text" value="请输入密码">
</div>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id);};
$('input1').onfocus = function(){
this.style.display = 'none';
$('input2').focus();
}
$('input2').onblur = function(){
if(!this.value||this.value.length==0) $('input1').style.display = 'block';
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="user_password"><input class="user_password1" type="text" alts="请输入密码" value="请输入密码" /><input class="user_password2" type="password" /></div>然后用JS把前面的隐藏后面的显示就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
