js實現(xiàn)Element中input組件的部分功能并封裝成組件(實例代碼)

更新時間：2021年03月02日 08:23:15 作者：背著泰山找黃河

這篇文章主要介紹了純生js實現(xiàn)Element中input組件的部分功能（慢慢完善）并封裝成組件,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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

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

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

JS代碼：

function createElementInput(str){
  var temp = str;
  var html = "<div id='my_input_div' onmouseover='addClearNode(\""+str+"\")'' onmouseout='hiddenClearNode(\""+str+"\")''>";
  html += "<input id='my_input' placeholder='請輸入內(nèi)容'";
  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+"' onmousedown='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 = document.getElementById('my_input').value;
  var button = document.getElementById(str);
  //添加判斷 如果輸入框中有值 則顯示清空按鈕
  if(value){
    if(button){
      button.style.visibility = "visible"
    }
  }
}
//應(yīng)該輸入內(nèi)容之后使用該事件
function addClearNode(str){
  var value = document.getElementById('my_input').value;
  var button = document.getElementById(str);
  //alert(value)
  if(value){
    if(button){
      //將button設(shè)置為可見
      button.style.visibility = 'visible'
    }
  }else{
    //判斷該屬性是否存在
    if(button){
      //將button設(shè)置為不可見
      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 = "";
  document.getElementById(str).style.visibility = "hidden";
  //仍然處于選中狀態(tài) 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陰影設(shè)置為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;
    }
  }
  //仍然處于選中狀態(tài) 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;
}

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

到此這篇關(guān)于純生js實現(xiàn)Element中input組件的部分功能（慢慢完善）并封裝成組件的文章就介紹到這了,更多相關(guān)js實現(xiàn)input組件功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: