文本框和密码框都是input元素，只是type属性值不一样，因此只要将type属性由text修改为password即可实现文本框变密码框。示例如下：
1、HTML结构
<input type="text" id="test" value="请输入密码" onclick="fun(this)">
2、javascript代码
function fun(obj){ obj.value = "" obj.type = "password"}
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>
当鼠标按下时所输入密码为明文，松开就恢复******1.首先我们在html中写入一个输入框和一个按钮，分别给它们一个id来连接js。
<body>
<input type="password" name="" id="pwd"/>
<input type="button" id="btn" value="点击显示"/>
</body>
2.可以通过event事件中的onmousedown、onmouseup来触发鼠标按下和松开的事件
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
当type = "password"时输入的内容为******；
当type = "text"时输入的内容为明文。
下面是js的代码：
<script type="text/javascript">
//获得按钮控件
var btnin = document.getElementById("btn")
//鼠标按下时触发的事件
btnin.onmousedown = function(){
//获得输入框控件
pwdin = document.getElementById("pwd")
//改变输入框内容
pwdin.type = "text"
}
//鼠标松开时触发的事件
btnin.onmouseup = function(){
//改变输入框内容
pwdin.type = "password"
}
