純生js實作Element中input組件的部分功能（慢慢完善）并封裝成組件-有解無憂

現在實作的有基礎用法、可清空、密碼框，參考鏈接：https://element.eleme.cn/#/zh-CN/component/input

HTML代碼：想要測驗哪個組件，直接將對應組件解開注釋即可，標紅的js和css記得修改成你自己的位置，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js實作可清空input組件</title>
        <script src="https://www.cnblogs.com/qcq0703/js/input/jsInput.js"></script>
        <link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/qcq0703/css/jsInput.css"/>
    </head>
    <body>
        <script>
            //普通input輸入框
            　document.write(createElementInput())
            //添加可清空功能clearable
            //document.write(createElementInput("clearable"))
            //實作密碼框show-password
            //document.write(createElementInput("show-password"))
        </script>
    </body>
</html>

JS代碼：

function createElementInput(str){
    var temp = str;
    var html = "<div id='my_input_div' onm ouseover='addClearNode(\""+str+"\")'' onm ouseout='hiddenClearNode(\""+str+"\")''>";
    html += "<input id='my_input' placeholder='請輸入內容'";
    if(str){
          if(str == 'show-password'){
              html+=" type = 'password' ";
          }
    } 
    html += "oninput='addClearNode(\""+str+"\")'";
    html += "onclick='changeColor(\""+str+"\")'";
    html += "onblur='hiddenClearNode(\""+str+"\")'/>";
    if(str){
      html += "<input id='"+str+"' onm ousedown='changeValue(\""+str+"\")'/>";
    }   
    html += "</div>"
    return html;
}

//box-shadow: 0 0 0 20px pink;  通過添加陰影的方式顯示邊框
function changeColor(str){
    //alert(str)
    document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff";
    //獲取inpu的值
    var value = https://www.cnblogs.com/qcq0703/p/document.getElementById('my_input').value;
    var button = document.getElementById(str);
    //添加判斷 如果輸入框中有值 則顯示清空按鈕
    if(value){
        if(button){
           button.style.visibility = "visible"
        }
    }
}
//應該輸入內容之后使用該事件
function addClearNode(str){
    var value = https://www.cnblogs.com/qcq0703/p/document.getElementById('my_input').value;
    var button = document.getElementById(str);
    //alert(value)
    if(value){
        if(button){
            //將button設定為可見
            button.style.visibility = 'visible'
        }
    }else{
        //判斷該屬性是否存在
        if(button){
            //將button設定為不可見
            button.style.visibility = 'hidden'
        }
    }
    //選中后div添加選中樣式 高亮顯示
    document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
}
//改變input中的值
function changeValue(str){
    if(str){
        if(str == 'clearable'){
            clearValues(str);
        }else if(str == 'show-password'){
            showPassword();
        }
    }
    
}
//清空輸入值
function clearValues(str){
    document.getElementById("my_input").value = https://www.cnblogs.com/qcq0703/p/"";
    document.getElementById(str).style.visibility = "hidden";
    //仍然處于選中狀態 div邊框突出陰影
    document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}

//隱藏清除按鈕
function hiddenClearNode(str){
    var button = document.getElementById(str);
    if(button){
        button.style.visibility="hidden";
    }
    //將div陰影設定為0
    document.getElementById("my_input_div").style.boxShadow="0 0 0"
}

//顯示密碼
function showPassword(){
    var myInput = document.getElementById('my_input');
    var password = myInput.value;
    var type = myInput.type;
    //alert(type)
    if(type){
        if(type == 'password'){
            myInput.type = '';
            myInput.value = password;
        }else{
            myInput.type = 'password';
            myInput.value = password;
        }
    }
    //仍然處于選中狀態 div邊框突出陰影
    document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}

CSS代碼：

#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;
}
#clearable{
    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;
}
#show-password{
    height: 20px;
    width: 15px;
    text-align: center;
    visibility:hidden;
    border: none;
    outline: none;
    color: #409eff;
    cursor: pointer;
    background-image: url(../image/eye.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    position: absolute;
    top: 10px;
    left: 120px;
    display: inline-block;
}

剩下的功能會慢慢被完善......

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/264423.html

標籤：Html/Css

上一篇：提示欄位供應商未準備好輸入

下一篇：Svelte 碼半功倍