|
接著上一篇的：js實(shí)現(xiàn)element中可清空的輸入框（1）繼續(xù)優(yōu)化，感興趣的可以去看看喲，直通車鏈接：https://www.cnblogs.com/qcq0703/p/14450001.html 實(shí)現(xiàn)效果如下圖：https://element./#/zh-CN/component/input
首先說明一下這一個(gè)輸入框外形 1、邊框圓角 2、可清空按鈕 3、空值的時(shí)候顯示請輸入內(nèi)容 嗯，就這些了。 其次是有哪些功能 1、獲得焦點(diǎn)邊框高亮 2、輸入值時(shí)可清空圖標(biāo) 3、點(diǎn)擊清空圖標(biāo)，清空內(nèi)容 4、input失去焦點(diǎn)，不再高亮，也不再顯示可清空圖標(biāo) 5、將輸入值刪除為空時(shí)，不再顯示可清空圖標(biāo) 6、input中有值，鼠標(biāo)移到input輸入框時(shí)，顯示可清空圖標(biāo) 接下來就是實(shí)現(xiàn)這些外形和功能了 首先分析一下啊，相信你一眼看上去，就會想到應(yīng)該有一個(gè)input輸入框，然后有一個(gè)放置圖標(biāo)的節(jié)點(diǎn)，然后再有一個(gè)div外層將這兩個(gè)元素包圍住，那好先來實(shí)現(xiàn) <div id="my_input_div"> <input placeholder="請輸入內(nèi)容"/> <input style="width: 20px;"/> </div> 達(dá)到效果：
這也不像啊，先別急咱們接下來調(diào)整樣式。給div加一個(gè)邊框，然后角度調(diào)整一下，寬度調(diào)整一下 <div id="my_input_div" style='border: solid 1px silver;width: 200px;border-radius: 4px;'> <input placeholder="請輸入內(nèi)容"/> <input style="width: 20px;"/> </div> </body> 達(dá)到效果：
是不是有那么點(diǎn)意思了，接下來再調(diào)整兩個(gè)input的樣式，input就別再要邊框了，請輸入內(nèi)容你是不是也感覺到太靠左了，那么接下來也調(diào)整一下。 <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'> <input placeholder="請輸入內(nèi)容" style="width: 120px;border: none;margin-left: 4px;height: 30px;"/> <input style="width: 20px;border: none;height: 30px;"/> </div> 達(dá)到效果：
這么一看有點(diǎn)那個(gè)意思了啊，但是有個(gè)問題，input獲得焦點(diǎn)會突出高亮的，這樣邊框就又出現(xiàn)了，截圖不太好截，就只能描述了，那么接下就把這個(gè)也處理掉。 <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'> <input placeholder="請輸入內(nèi)容" style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"/> <input style="width: 20px;border: none;height: 30px;outline: none;"/> </div> 效果同上，只不過這次獲得焦點(diǎn)之后不會有高亮顯示了 接下來就是鼠標(biāo)，鼠標(biāo)放上去，最外層邊框需要高亮啊。一開始我是用的outline來做的，添加點(diǎn)擊事件，然后動態(tài)給div綁定outline屬性 <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
/>
<input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/>
<script>
function changeColor(){
document.getElementById('my_input_div').style.outline = "#409EFF solid 2px"
}
</script></div>達(dá)到效果：
大家看到?jīng)]，這個(gè)邊框是一個(gè)矩形，咱們的圓角被破壞了，怎么辦呢，查文檔，問百度唄，結(jié)果發(fā)現(xiàn)用這個(gè)貌似真的只能是個(gè)矩形，具體解決可以看此連接：https://www.cnblogs.com/qcq0703/p/14450674.html，所以只能另辟蹊徑 <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
/>
<input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/>
</div>
<script>
function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"
}</script>達(dá)到效果：
哇哦，perfect?。。】吹綐?biāo)紅的沒，咱們不用outline了，改用盒子陰影，離了張屠夫，就不信咱還能吃帶毛的豬，黑了東方有西方，黑了南方有北方，如果四方都不亮，中間有個(gè)大月亮，如果月亮被云遮，你的頭上還放光。 咳咳，扯遠(yuǎn)了，回來繼續(xù)搞啊。 話說咱們input得到焦點(diǎn)，邊框高亮，那么失去焦點(diǎn)就應(yīng)該現(xiàn)原形了啊。主要是添加了一個(gè)失去焦點(diǎn)的事件 <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
/>
<input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/>
</div>
<script>
function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"
} function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
} </script>達(dá)到效果同上，截圖不好展示。 接下來，input輸入框中輸入值的時(shí)候需要顯示可清空圖標(biāo)，那就繼續(xù)調(diào)整，咱們先把清空按鈕調(diào)整出來 <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
/>
<input id="my_button" style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;" value="清空"/>
</div>
<script>
function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
document.getElementById('my_button').style.
}
function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
}</script>達(dá)到效果
這么一直顯示也不是個(gè)事啊，就先把他設(shè)置成隱藏，然后再需要他的時(shí)候讓他顯示，不需要就隱藏 <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
/>
<input id="my_button"
style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;" value="清空"/>
</div>
<script>
function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"; document.getElementById('my_button').style.visibility = "visible"
}
function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
document.getElementById('my_button').style.visibility = "hidden"
}</script>效果就不展示了，你懂得。 哎，仔細(xì)想一下不對啊，element的可清空組件是在輸入框輸入的時(shí)候才出現(xiàn)可清空的圖標(biāo)的，而且輸入的值清零了，清空圖標(biāo)也會消失，那么咱們接著改。 <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
oninput="addClearNode()"
/>
<input id="my_button"
style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;" value="清空"/>
</div>
<script> //改變邊框顏色 function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"; //這一行肯定不對了 那么咱們注釋掉 //document.getElementById('my_button').style.visibility = "visible" } //隱藏清空圖標(biāo) function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
document.getElementById('my_button').style.visibility = "hidden"
} //顯示清空圖標(biāo)
function addClearNode(){
var value = document.getElementById('my_input').value;
if(value){
document.getElementById('my_button').style.visibility = "visible"
}else{
document.getElementById('my_button').style.visibility = "hidden"
}
}</script>效果還是不展示了。 接下來，點(diǎn)擊清空按鈕，就該清空輸入的值了，接著搞起，不就加一個(gè)點(diǎn)擊事件嗎，點(diǎn)擊清空圖標(biāo)，將input的值清空不就得了，簡單 <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
oninput="addClearNode()"
/>
<input id="my_button"
style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
onclick="clearValue()"
value="清空"/>
</div>
<script> //改變邊框顏色 function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"; //這一行肯定不對了 那么咱們注釋掉 //document.getElementById('my_button').style.visibility = "visible" } //隱藏清空圖標(biāo) function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
document.getElementById('my_button').style.visibility = "hidden"
} //顯示清空圖標(biāo) function addClearNode(){ var value = document.getElementById('my_input').value; if(value){
document.getElementById('my_button').style.visibility = "visible"
}else{
document.getElementById('my_button').style.visibility = "hidden"
}
} function clearValue(){
document.getElementById('my_input').value = '';
}</script>額.......發(fā)現(xiàn)沒起作用呢，為什么不生效呢，仔細(xì)想想，是不是想到點(diǎn)什么，咱們input還有一個(gè)失去焦點(diǎn)的事件呢，你這邊要點(diǎn)擊，那邊失去焦點(diǎn)，這不就沖突了嗎，咋辦呢，涼拌！咱們可以把點(diǎn)擊事件改為onmousedown事件，onclick事件其實(shí)可以分解為onmousedown和onmouseup兩個(gè)事件，所以咱們直接使用onmousedown就可以率先執(zhí)行咱們想要的事件了，至于之前提到的event.prevenDefault只是阻止默認(rèn)事件的動作，比如a標(biāo)簽，應(yīng)該跳轉(zhuǎn)，但是不讓他跳轉(zhuǎn)。而且好像是jQuery的方法，不是純生的js，暫時(shí)不用，等我用jquery實(shí)現(xiàn)的時(shí)候再用一下。 <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
oninput="addClearNode()"
/>
<input id="my_button"
style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
onmousedown="clearValue()"
value="清空"/>
</div>
<script> //改變邊框顏色 function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"; //這一行肯定不對了 那么咱們注釋掉 //document.getElementById('my_button').style.visibility = "visible" } //隱藏清空圖標(biāo) function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
document.getElementById('my_button').style.visibility = "hidden"
} //顯示清空圖標(biāo) function addClearNode(){ var value = document.getElementById('my_input').value; if(value){
document.getElementById('my_button').style.visibility = "visible"
}else{
document.getElementById('my_button').style.visibility = "hidden"
}
}
function clearValue(){
document.getElementById('my_input').value = '';
}</script>再仔細(xì)研究一下element的可清空輸入框，鼠標(biāo)移上去，如果輸入框內(nèi)容不為空，也會顯示，移開又不顯示了。這時(shí)候需要注意了啊，這時(shí)候的事件就不該在input上了，而是最外層的div上面。 <div id="my_input_div"
style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'
onmouseover="addClearNode()";
onmouseout="hiddenClearNode()"
>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
onclick="changeColor()"
onblur="hiddenClearNode()"
oninput="addClearNode()"
/>
<input id="my_button"
style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
onmousedown="clearValue()"
value="清空"/>
</div>
<script> //改變邊框顏色 function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"; //這一行肯定不對了 那么咱們注釋掉 //document.getElementById('my_button').style.visibility = "visible" } //隱藏清空圖標(biāo) function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
document.getElementById('my_button').style.visibility = "hidden"
} //顯示清空圖標(biāo) function addClearNode(){ var value = document.getElementById('my_input').value; if(value){
document.getElementById('my_button').style.visibility = "visible"
}else{
document.getElementById('my_button').style.visibility = "hidden"
}
}
function clearValue(){
document.getElementById('my_input').value = '';
}</script>現(xiàn)在基本效果功能看上去差不多了，看著這個(gè)清空倆字是不是感覺很別扭，那么如你所愿，咱們換成圖標(biāo)。還有鼠標(biāo)放上去是不是應(yīng)該是一個(gè)小手的標(biāo)志啊。 <div id="my_input_div"
style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'
onmouseover="addClearNode()";
onmouseout="hiddenClearNode()"
>
<input id="my_input" placeholder="請輸入內(nèi)容"
style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;cursor: pointer;"
onclick="changeColor()"
onblur="hiddenClearNode()"
oninput="addClearNode()"
/>
<input id="my_button"
style="width: 20px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;
background-image: url(../image/clear.svg);
position: absolute;
background-repeat: no-repeat;
background-size: 12px;
top: 18px;
left: 140px;
display: inline-block;
cursor: pointer;"
onmousedown="clearValue()"
/>
</div>
<script> //改變邊框顏色 function changeColor(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"; //這一行肯定不對了 那么咱們注釋掉 //document.getElementById('my_button').style.visibility = "visible" } //隱藏清空圖標(biāo) function hiddenClearNode(){
document.getElementById('my_input_div').style.boxShadow = "0 0 0"
document.getElementById('my_button').style.visibility = "hidden"
} //顯示清空圖標(biāo) function addClearNode(){ var value = document.getElementById('my_input').value; if(value){
document.getElementById('my_button').style.visibility = "visible"
}else{
document.getElementById('my_button').style.visibility = "hidden"
}
}
function clearValue(){
document.getElementById('my_input').value = '';
}</script>達(dá)到效果：
現(xiàn)在看代碼是不是感覺有點(diǎn)亂啊，咱們整理一下，放大招了。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js實(shí)現(xiàn)input，選中高亮、輸入值之后可清空、移除鼠標(biāo)清空按鈕隱藏、選中高亮</title>
</head>
<body>
<div id="app">
<div id="my_input_div"
onmouseover="addClearNode()"
onmouseout="hiddenClearNode()">
<input id="my_input" placeholder='請輸入內(nèi)容'
oninput="addClearNode()"
onclick="changeColor()"
onblur="hiddenClearNode()"/>
<input id="my_button" onmousedown="clearValue()"/>
</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").style.visibility = "visible"
}
} //應(yīng)該輸入內(nèi)容之后使用該事件 function addClearNode(){ var value = document.getElementById('my_input').value; //alert(value)
if(value){ //將button設(shè)置為可見
document.getElementById("my_button").style.visibility = 'visible'
}else{ //將button設(shè)置為不可見
document.getElementById("my_button").style.visibility = 'hidden'
} //選中后div添加選中樣式 高亮顯示
document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
} //清空input的值并且保證在獲取獲取鼠標(biāo)事件的同時(shí)不觸發(fā) input失去焦點(diǎn)的事件 function clearValue(){
document.getElementById("my_input").value = "";
document.getElementById("my_button").style.visibility = "hidden"; //仍然處于選中狀態(tài) div邊框突出陰影
document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}
//隱藏清除按鈕 function hiddenClearNode(){
document.getElementById("my_button").style.visibility="hidden"; //將div陰影設(shè)置為0
document.getElementById("my_input_div").style.boxShadow="0 0 0"
} </script>
<style>
#my_input_div{
width: 150px;
border: 1px solid silver;
border-radius: 4px;
position: relative;
}
#my_input{
height: 30px;
width:100px;
margin-left: 6px;
border: none;
outline: none;
cursor: pointer;
}
#my_button{
height: 20px;
width: 15px;
text-align: center;
visibility:hidden;
border: none;
outline: none;
color: #409eff;
cursor: pointer;
background-image: url(../image/clear.svg);
background-repeat: no-repeat;
background-size: 12px;
position: absolute;
top: 10px;
left: 120px;
display: inline-block;
} </style>
</body>
</html>以上就是完成這個(gè)組件的全部過程了，對了，那個(gè)清空圖標(biāo)是怎么找到的，我得說一下，看法寶：https://www./search/index?spm=a313x.7781069.1998910419.55&searchType=icon&q=%E6%B8%85%E7%A9%BA 記錄一下遇到的難點(diǎn)啊。 1、選中凸顯邊框問題，輪廓總是為矩形，最終使用box-shadow解決了，這個(gè)查了很長時(shí)間呢。 2、事件沖突問題，通過將onclick改成onmousedown解決了。 3、將清空倆字改為小圖標(biāo)，這個(gè)直接百度到了，自己把定位調(diào)整了一下就可以了。 看官們，碼字不易，你懂得。 |
|
|
