實現效果如下圖：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>