最终效果啊：
还是接着前边的来的，不算组件，上篇文章有从头到尾的写法，这篇延续了上篇的成果。主要修改的地方我标红。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现input密码框</title>
</head>
<body>
<div id="app">
<div id="my_input_div"
onmouseover="addClearNode()"
onmouseout="hiddenClearNode()">
<input id="my_input" type='password' placeholder='请输入内容'
oninput="addClearNode()"
onclick="changeColor()"
onblur="hiddenClearNode()"/>
<input id="my_button_password" onmousedown="showPassword()"/>
</div>
</div>
<script>
//box-shadow: 0 0 0 20px pink; 通过添加阴影的方式显示边框
function changeColor(){
document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff";
//获取inpu的值
var value = document.getElementById('my_input').value;
//添加判断 如果输入框中有值 则显示清空按钮
if(value){
document.getElementById("my_button_password").style.visibility = "visible"
}
}
//应该输入内容之后使用该事件
function addClearNode(){
var value = document.getElementById('my_input').value;
//alert(value)
if(value){
//将button设置为可见
document.getElementById("my_button_password").style.visibility = 'visible'
}else{
//将button设置为不可见
document.getElementById("my_button_password").style.visibility = 'hidden'
}
//选中后div添加选中样式 高亮显示
document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
}
//清空input的值并且保证在获取获取鼠标事件的同时不触发 input失去焦点的事件
function showPassword(){
var myInput = document.getElementById('my_input');
var password = myInput.value;
var type = myInput.type;
//alert(type)
if(type){
if(type == 'password'){
myInput.type = '';
myInput.value = password;
}else{
myInput.type = 'password';
myInput.value = password;
}
}
//仍然处于选中状态 div边框突出阴影
document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}
//隐藏清除按钮
function hiddenClearNode(){
document.getElementById("my_button_password").style.visibility="hidden";
//将div阴影设置为0
document.getElementById("my_input_div").style.boxShadow="0 0 0"
}
</script>
<style>
#my_input_div{
150px;
border: 1px solid silver;
border-radius: 4px;
position: relative;
}
#my_input{
height: 30px;
100px;
margin-left: 6px;
border: none;
outline: none;
cursor: pointer;
}
#my_button_password{
height: 20px;
15px;
text-align: center;
visibility:hidden;
border: none;
outline: none;
color: #409eff;
cursor: pointer;
background-image: url(../image/eye.svg);
background-repeat: no-repeat;
background-size: 12px;
position: absolute;
top: 10px;
left: 120px;
display: inline-block;
}
</style>
</body>
</html>