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

阿新 • • 發佈：2021-02-27

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

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

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

　　1、邊框圓角

　　2、可清空按鈕

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

　　嗯，就這些了。

其次是有哪些功能

　　1、獲得焦點邊框高亮

　　2、輸入值時可清空圖示

　　3、點選清空圖示，清空內容

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

　　5、將輸入值刪除為空時，不再顯示可清空圖示

　　6、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

記錄一下遇到的難點啊。

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

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

　　3、將清空倆字改為小圖示，這個直接百度到了，自己把定位調整了一下就可以了。

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

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

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

JS自動生成動態HTML驗證碼頁面，輸入錯誤自動清空輸入框

微信小程序清空輸入框

微信小程式例子——點擊發送資訊清空輸入框

android中可左右滑動輸入框

【jQuery】簡單的點選刪除按鈕清空輸入框的內容

JS實現回車鍵切換到下一個輸入框

jquery自動獲取游標在字串後，清空輸入框文字再聚焦

Android中apk動態載入技術研究（2）android插件化及實現

input 清空值。（轉載）

原生JS實現彩票36選7不重復（優化）

Node.js實現PC端類微信聊天軟體（二）

python中對閉包的理解（2）

關於以太坊智慧合約在專案實戰過程中的設計及經驗總結（2）

《C語言程式設計：現代方法（第2版）（K.N.King 著）》學習筆記九：格式化輸入/輸出（2）

android輸入框（EditText）圓角半透明

iOS開發小記：帶輸入框（TextField）的UIAlertView

iOS 密碼輸入框（UITextField）

文字輸入框（UITextField）的用法

devExpress:gridview 中繫結下拉框（示例）

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

相關推薦