js implements some functions of the input component in Element and encapsulates it into a component (example code)

Currently implemented are basic usage, clearable, and password boxes. Reference link: https://element.eleme.cn/#/zh-CN/component/input

HTML code: If you want to test a component, just uncomment the corresponding component. Remember to modify the js and css marked in red to your own location.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js implements clearable input component</title>
    <script src="../js/input/jsInput.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/jsInput.css"/>
  </head>
  <body>
    <script>
      //Ordinary input input box document.write(createElementInput())
      //Add clearable function
      //document.write(createElementInput("clearable"))
      //Implement the password box show-password
      //document.write(createElementInput("show-password"))
    </script>
  </body>
</html>

JS code:

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='Please enter content'";
  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; Display the border by adding shadow function changeColor(str){
  //alert(str)
  document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff";
  //Get the value of input var value = document.getElementById('my_input').value;
  var button = document.getElementById(str);
  //Add a check if there is a value in the input box and then display the clear button if (value) {
    if(button){
      button.style.visibility = "visible"
    }
  }
}
//You should use this event after entering content function addClearNode(str){
  var value = document.getElementById('my_input').value;
  var button = document.getElementById(str);
  //alert(value)
  if(value){
    if(button){
      //Set the button to be visible button.style.visibility = 'visible'
    }
  }else{
    //Judge whether the attribute exists if(button){
      //Set the button to be invisible button.style.visibility = 'hidden'
    }
  }
  //After selecting, div adds selected style and highlights document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
}
//Change the value in input function changeValue(str){
  if(str){
    if(str == 'clearable'){
      clearValues(str);
    }else if(str == 'show-password'){
      showPassword();
    }
  }
  
}
// Clear input values function clearValues(str) {
  document.getElementById("my_input").value = "";
  document.getElementById(str).style.visibility = "hidden";
  //Still in selected state div border highlights shadow document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}

//Hide the clear button function hiddenClearNode(str){
  var button = document.getElementById(str);
  if(button){
    button.style.visibility="hidden";
  }
  //Set the div shadow to 0
  document.getElementById("my_input_div").style.boxShadow="0 0 0"
}

//Show password 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;
    }
  }
  //Still in selected state div border highlights shadow document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}

CSS code:

#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;
}

The remaining functions will be gradually improved...

This is the end of this article about using pure js to implement some functions of the input component in Element (gradually improving) and encapsulating it into components. For more relevant js content about implementing input component functions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of JavaScript axios installation and packaging case
In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle
Vue.js manages the encapsulation of background table components
Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects
Native js encapsulation seamless carousel function
Native JS encapsulation vue Tab switching effect
js implements a simple method of encapsulating jQuery and a detailed explanation of chain operations
JavaScript implements prototype encapsulation carousel
Encapsulation method of JavaScript slow motion animation function
JavaScript canvas encapsulation dynamic clock
About Jackson's JSON tool class encapsulation JsonUtils usage
Example code for JavaScript encapsulation of a singly linked list
Common front-end JavaScript method encapsulation

<<: How to Rename Multiple Files at Once in Linux

>>: Detailed explanation of custom configuration of docker official mysql image