js實現element中可清空的輸入框（2）

接着上一篇的：js實現element中可清空的輸入框（1）繼續優化，感興趣的能夠去看看喲，直通車連接：https://www.cnblogs.com/qcq0703/p/14450001.html

實現效果以下圖：https://element.eleme.cn/#/zh-CN/component/input  

首先說明一下這一個輸入框外形

　　一、邊框圓角

　　二、可清空按鈕

　　三、空值的時候顯示請輸入內容

　　嗯，就這些了。

其次是有哪些功能

　　一、得到焦點邊框高亮

　　二、輸入值時可清空圖標

　　三、點擊清空圖標，清空內容

　　四、input失去焦點，再也不高亮，也再也不顯示可清空圖標

　　五、將輸入值刪除爲空時，再也不顯示可清空圖標

　　六、input中有值，鼠標移到input輸入框時，顯示可清空圖標

接下來就是實現這些外形和功能了

首先分析一下啊，相信你一眼看上去，就會想到應該有一個input輸入框，而後有一個放置圖標的節點，而後再有一個div外層將這兩個元素包圍住，那好先來實現

<div id="my_input_div">
    <input placeholder="請輸入內容"/>
    <input style="width: 20px;"/>
</div>

達到效果：

 

 

 這也不像啊，先別急我們接下來調整樣式。給div加一個邊框，而後角度調整一下，寬度調整一下

<div id="my_input_div" style='border: solid 1px silver;width: 200px;border-radius: 4px;'>
    <input placeholder="請輸入內容"/>
    <input style="width: 20px;"/>
</div>
</body>

達到效果：

 

 

 是否是有那麼點意思了，接下來再調整兩個input的樣式，input就別再要邊框了，請輸入內容你是否是也感受到太靠左了，那麼接下來也調整一下。

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
    <input placeholder="請輸入內容" style="width: 120px;border: none;margin-left: 4px;height: 30px;"/>
    <input style="width: 20px;border: none;height: 30px;"/>
</div>

達到效果：

 

 

 這麼一看有點那個意思了啊，可是有個問題，input得到焦點會突出高亮的，這樣邊框就又出現了，截圖不太好截，就只能描述了，那麼接下就把這個也處理掉。

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
    <input placeholder="請輸入內容" style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"/>
    <input style="width: 20px;border: none;height: 30px;outline: none;"/>
</div>

效果同上，只不過此次得到焦點以後不會有高亮顯示了

接下來就是鼠標，鼠標放上去，最外層邊框須要高亮啊。一開始我是用的outline來作的，添加點擊事件，而後動態給div綁定outline屬性

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
    <input id="my_input" placeholder="請輸入內容" 
        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>

達到效果：

 

 

 你們看到沒，這個邊框是一個矩形，我們的圓角被破壞了，怎麼辦呢，查文檔，問百度唄，結果發現用這個貌似真的只能是個矩形，具體解決能夠看此鏈接：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="請輸入內容" 
        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>

達到效果：

 

 

哇哦，perfect！！！看到標紅的沒，我們不用outline了，改用盒子陰影，離了張屠夫，就不信咱還能吃帶毛的豬，黑了東方有西方，黑了南方有北方，若是四方都不亮，中間有個大月亮，若是月亮被雲遮，你的頭上還放光。

咳咳，扯遠了，回來繼續搞啊。

話說我們input獲得焦點，邊框高亮，那麼失去焦點就應該現原形了啊。主要是添加了一個失去焦點的事件

<div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
    <input id="my_input" placeholder="請輸入內容" 
        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>

達到效果同上，截圖很差展現。

接下來，input輸入框中輸入值的時候須要顯示可清空圖標，那就繼續調整，我們先把清空按鈕調整出來

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
    <input id="my_input" placeholder="請輸入內容" 
        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>

達到效果

 

 這麼一直顯示也不是個事啊，就先把他設置成隱藏，而後再須要他的時候讓他顯示，不須要就隱藏

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
    <input id="my_input" placeholder="請輸入內容" 
        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>

效果就不展現了，你懂得。

哎，仔細想一下不對啊，element的可清空組件是在輸入框輸入的時候纔出現可清空的圖標的，並且輸入的值清零了，清空圖標也會消失，那麼我們接着改。

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
    <input id="my_input" placeholder="請輸入內容" 
        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"
        }
        //隱藏清空圖標
        function hiddenClearNode(){
            document.getElementById('my_input_div').style.boxShadow = "0 0 0"
            document.getElementById('my_button').style.visibility = "hidden"
        }
        //顯示清空圖標 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>

效果仍是不展現了。

接下來，點擊清空按鈕，就該清空輸入的值了，接着搞起，不就加一個點擊事件嗎，點擊清空圖標，將input的值清空不就得了，簡單

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
    <input id="my_input" placeholder="請輸入內容" 
        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"
        }
        //隱藏清空圖標
        function hiddenClearNode(){
            document.getElementById('my_input_div').style.boxShadow = "0 0 0"
            document.getElementById('my_button').style.visibility = "hidden"
        }
        //顯示清空圖標
        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>

額.......發現沒起做用呢，爲何不生效呢，仔細想一想，是否是想到點什麼，我們input還有一個失去焦點的事件呢，你這邊要點擊，那邊失去焦點，這不就衝突了嗎，咋辦呢，涼拌！onclick點擊事件改成鼠標按下事件，而後調用window.event.preventDefault();阻止默認事件就能夠了。

<div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
    <input id="my_input" placeholder="請輸入內容" 
        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"
        }
        //隱藏清空圖標
        function hiddenClearNode(){
            document.getElementById('my_input_div').style.boxShadow = "0 0 0"
            document.getElementById('my_button').style.visibility = "hidden"
        }
        //顯示清空圖標
        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(){
            window.event.preventDefault();
            document.getElementById('my_input').value = '';
        }
</script>

再仔細研究一下element的可清空輸入框，鼠標移上去，若是輸入框內容不爲空，也會顯示，移開又不顯示了。這時候須要注意了啊，這時候的事件就不應在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="請輸入內容" 
        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"
        }
        //隱藏清空圖標
        function hiddenClearNode(){
            document.getElementById('my_input_div').style.boxShadow = "0 0 0"
            document.getElementById('my_button').style.visibility = "hidden"
        }
        //顯示清空圖標
        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(){
            window.event.preventDefault();
            document.getElementById('my_input').value = '';
        }
</script>

如今基本效果功能看上去差很少了，看着這個清空倆字是否是感受很彆扭，那麼如你所願，我們換成圖標。還有鼠標放上去是否是應該是一個小手的標誌啊。

<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="請輸入內容" 
        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"
        }
        //隱藏清空圖標
        function hiddenClearNode(){
            document.getElementById('my_input_div').style.boxShadow = "0 0 0"
            document.getElementById('my_button').style.visibility = "hidden"
        }
        //顯示清空圖標
        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(){
            window.event.preventDefault();
            document.getElementById('my_input').value = '';
        }
</script>

達到效果：

 

 如今看代碼是否是感受有點亂啊，我們整理一下，放大招了。

<!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" placeholder='請輸入內容' 
                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"
                }
            }
            //應該輸入內容以後使用該事件
            function addClearNode(){
                var value = document.getElementById('my_input').value;
                //alert(value)
                if(value){
                    //將button設置爲可見
                    document.getElementById("my_button").style.visibility = 'visible'
                }else{
                    //將button設置爲不可見
                    document.getElementById("my_button").style.visibility = 'hidden'
                }
                //選中後div添加選中樣式 高亮顯示
                document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
            }
            //清空input的值而且保證在獲取獲取鼠標事件的同時不觸發 input失去焦點的事件
            function clearValue(){
                //解決button獲取焦點的同時不觸發其餘元素失去焦點的事件
                window.event.preventDefault();
                document.getElementById("my_input").value = "";
                document.getElementById("my_button").style.visibility = "hidden";
                //仍然處於選中狀態 div邊框突出陰影
                document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
            }
            
            //隱藏清除按鈕
            function hiddenClearNode(){
                document.getElementById("my_button").style.visibility="hidden";
                //將div陰影設置爲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>

以上就是完成這個組件的所有過程了，對了，那個清空圖標是怎麼找到的，我得說一下，見解寶：https://www.iconfont.cn/search/index?spm=a313x.7781069.1998910419.55&searchType=icon&q=%E6%B8%85%E7%A9%BA

記錄一下遇到的難點啊。

　　一、選中凸顯邊框問題，輪廓老是爲矩形，最終使用box-shadow解決了，這個查了很長時間呢。

　　二、事件衝突問題，經過window.event.preventDefault();解決了。

　　三、將清空倆字改成小圖標，這個直接百度到了，本身把定位調整了一下就能夠了。

看官們，碼字不易，你懂得。