文本框和密码框都是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、效果演示
HTML代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
用户名 : <input type="text" name="username" id="username_input"></br>
密码 : <input type="password" name="passwd" id="passwd_input"></br>
<input type="button" value="登录" onclick="login()">
</div>
</body>
</html>
Js代码
<script type="text/javascript">var accountAll = [
{'username' : 'admin','passwd' : 'admin123'},
{'username' : 'jack','passwd' : 'jack'}
] // 存储账户json数据的数组
function login(){ //登陆判断
var username = document.getElementById('username_input').value // 获取username输入框内容
var passwd = document.getElementById('passwd_input').value // 获取passwd输入框内容
var account = accountAll.filter(function(e){return e.username == username})[0] // 筛选账号返回数组，不存在则返回空数组
if(!account){
console.log('账户不存在')
} else {
if(account.username == username && account.passwd == passwd){
console.log('登陆成功')
} else {
console.log('登陆失败')
}
}
}
</script>
