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

揹著泰山找黃河發表於2021-02-26

接著上一篇的：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 實現輸入框emoji表情釋出
2019-03-28
JS
Element UI Input框輸入無效
2020-11-24
UI
Vue中實現輸入框的自動補全功能
2024-04-09
Vue
Angular 實現輸入框中顯示文章標籤
2019-03-03
Angular
Element 輸入框input響應回車事件
2020-11-22
事件
文字框限制輸入字數的JS
2018-04-02
JS
記錄---實現一個支援@的輸入框
2024-06-28
element-ui的日期選擇框底部清空按鈕點選不關閉日期選擇框的實現辦法
2021-12-27
UI
Element原始碼分析系列5-Input(輸入框)
2019-03-03
原始碼
vue.js輸入框輸入值內容實時跟著變化
2018-03-24
Vue.js
實現高度“聽話”的多行文字輸入框
2019-03-26
element-ui 輸入框el-input 輸入長度限制元件不生效
2019-05-23
UI元件
HTML中實現多選一且輸入框的啟用與禁用
2024-11-25
HTML
js--手動實現一個常見的簡訊驗證碼輸入框
2021-06-06
JS
axure教程：如何實現數字輸入框效果
2021-07-14
Qt 實現文字輸入框，帶字數限制
2022-04-08
QT
Input 輸入框中只能輸入正整數
2020-12-04
沒有框架怎麼辦？原生 CSS + JS 實現一個標籤輸入框
2022-05-02
框架CSSJS
Element原始碼分析系列7-InputNumber(數字輸入框)
2018-08-23
原始碼
解決element-ui 輸入框el-input 輸入長度限制元件不生效
2019-10-08
UI元件
輸入框
2018-12-21
Angular.js 限制輸入框輸入內容，為純數字
2021-09-09
AngularJS
vue2 - element彈框自定義指令實現拖動、縮放
2024-08-12
Vue
純css實現輸入框placeholder動效及輸入校驗的示例程式碼
2019-10-16
CSS
VUE 實現 Studio 管理後臺（十二）：新增輸入組合，複雜輸入，輸入框 Input 系列
2020-03-08
Vue
imemode 控制輸入法，控制輸入框的輸入法
2024-04-16
從一次輸入框無法輸入的bug，談如何限制輸入框輸入型別
2019-03-03
型別
Flutter 密碼輸入框驗證碼輸入框
2020-07-07
Flutter密碼
HTML在透明輸入框裡新增圖示的實現程式碼
2020-05-19
HTML
Figma數值輸入框支援拖拽調整功能實現
2024-07-18
react輸入框輸入中文bug
2018-06-07
React
在Unity中用UGUI製作可輸入下拉框
2022-03-25
UnityUGUI
Vue.js 帶下拉選項的輸入框（Textbox with Dropdown）元件
2021-04-14
Vue.js元件
H5實現輸入框新增語音功能的方法詳解
2018-10-09
H5
js禁用頁面所有輸入框以及點選事件
2020-12-08
JS事件
input 輸入框只能輸入數字
2019-01-23
web前端動畫專題（2）：輸入框特效
2019-08-05
Web前端動畫特效
如何在相親交友原始碼中實現正方形驗證碼輸入框？
2021-11-18
原始碼

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

相關文章