js实现element中可清空的输入框（1）
实现效果如下图：https://element.eleme.cn/#/zh-CN/component/input
基础版，实现了部分功能，输入框选中高亮、输入值出现可清空按钮、input丢失焦点则隐藏可清空按钮以及选中边框不再高亮、点击清空按钮按钮隐藏以及input中的值清空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现input，选中高亮、输入值之后可清空、移除鼠标清空按钮隐藏、选中高亮移除</title>
</head>
<body>
<div id="app">
<div id="my_input_div" style="width: 140px;border: 1px solid silver;border-radius: 4px;">
<input id="my_input" placeholder='请输入内容' oninput="addNode()" onclick="changeColor()"
style='height: 30px;width:100px;margin-left: 6px;border: none;outline: none;cursor: pointer;'/>
<input id="my_button" value="清空"
style="height: 30px;width: 25px;text-align: center;visibility:
hidden;border: none;outline: none;color: #409eff;cursor: pointer;" onclick="clearValue()"
/>
</div>
</div>
<script>
function changeColor(){
document.getElementById("my_input_div").style.outline="thin outset #409eff";
}
//应该输入内容之后使用该事件
function addNode(){
//将button设置为可见
document.getElementById("my_button").style.visibility = 'visible'
//选中后div添加选中样式 高亮显示
document.getElementById("my_input_div").style.outline="thin outset #409eff";
}
//清空input的值
function clearValue(){
document.getElementById("my_input").value = "";
document.getElementById("my_button").style.visibility = "hidden";
document.getElementById("my_input_div").style.outline="none"
}
function hiddenNode(){
document.getElementById("my_button").style.visibility="hidden";
document.getElementById("my_input_div").style.outline="none"
}
</script>
</body>
</html>
还需完善的点：清空按钮和input移除按钮事件发生冲突、清除样式还需要调整、div边框选中高亮显示样式需要调整
学到的知识点：
document.getElementById('id')之后获取的是元素对象，也就是element对象
document.createElement('input') 创建元素
document.createElement('input').value = '内容' 创建元素并设置内容
document.createElement('input').type = 'button' 创建元素并设置类型
document.createElement('input').id = 'myId' 创建元素并设置id（class也可以这样设置）
document.getElementById('id').appendChilden(document.createElement('input')) 在id为id的元素添加一个input的子元素
document.getElementById('myId').nextElementSibling 获取id为myId元素的下一个元素
设置style，将id为myId的元素设置为不可见
document.getElementById('myId').style.visibility = 'hidden'
visibility属性的值
visible：可见 hidden：不可见 collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
设置选中时不高亮
document.getElementById('myId').style.outline = 'none'
outline属性的值可以有三个，轮廓宽度、轮廓样式、轮廓颜色，绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素被选中的作用，不会占据空间，也不一定是矩形。
Object.style.outline = outline-color outline-style outline-width
outlineWidrh
thin：瘦的
medium：中的
thick：厚的
length：长的
inherit：继承
outlineStyle
none：没有 hidden：隐藏 dotted：点线轮廓 dashed：虚线 solid：实线 double：双线 groove：凹槽 ridge：垄状 inset：嵌入 outset：外凹
outlineColor
color-name：颜色名称 color-rgb：rgp color-hex：颜色十六进制值 transparent：透明的
border边框的属性。跟outlineColor相同不再追叙
Object.style.border=borderWidth borderStyle borderColor
boder-radius设置边框角度
boder-radius：4px;
动态添加元素，并绑定方法，onclick可以替换想要绑定的方法名，详情可查看下面的粗糙版源码。
document.getElementById('myId').onclick = fuction 方法名(参数) { 具体方法体 }
常用的方法总结，标红的为常用的。
onclick：点击事件
onblur：失去焦点
onfocus：得到焦点
oninput：检测输入
onkeydown：键盘按下
onkeyup：键盘松开
onkeypress：按住键盘
onmousedown：鼠标按下
onmouseup：鼠标松开
onmousecover：鼠标放上去
onmousemove：鼠标移动
onmouseout：移开鼠标
onload：加载
onchange：改变
onsubmit：提交表单
附加第一版粗糙版源码，动态添加元素版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现input</title>
</head>
<body>
<div id="app">
<div id="my_input_div" style="width: 140px;border: 1px solid silver;border-radius: 4px;">
<input id="my_input" placeholder='请输入内容' onclick="addNode()" onblur="hiddenNode()"
style='height: 30px;width:100px;margin-left: 6px;border: none;outline: none;'/>
<input id="my_button" type="button" value="*" onclick="clearValue()" style="visibility: hidden;"/>
</div>
</div>
<script>
document.getElementById("app");
//应该输入内容之后使用该事件
function addNode(){
//将button设置为可见
document.getElementById("my_button").style.visibility = 'visible'
document.getElementById("my_input_div").style.outline="thin solid #409eff";
/* var input = document.getElementById("my_input_div");
var spanNode = document.getElementById("my_input").nextElementSibling;
//添加判断 如果已经存在删除按钮 则不再重复添加
if (spanNode == null){
var span = document.createElement('input');
span.type = "button"
span.value = "*"
span.onclick = function removeValue(){
console.log("2")
var myInput = document.getElementById("my_input");
myInput.value = "";
removeNode();
}
input.appendChild(span)
} */
}
function clearValue(){
document.getElementById("my_input").value = "";
document.getElementById("my_button").style.visibility = "hidden";
}
function hiddenNode(){
document.getElementById("my_button").style.visibility="hidden";
}
/* function removeNode(){
console.log("1")
var spanNode = document.getElementById("my_input").nextElementSibling;
spanNode.style.visibility = 'hidden';
//spanNode.remove();
} */
</script>
</body>
</html>
