1. 程式人生 > >js實現element中可清空的輸入框(2)

js實現element中可清空的輸入框(2)

接著上一篇的: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、將清空倆字改為小圖示,這個直接百度到了,自己把定位調整了一下就可以了。

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

&n