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

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

Recommend

A brief discussion on the matching rules of host and user when Mysql connects to the database

--When connecting to the database, the matching r...

Command to remove (delete) symbolic link in Linux

You may sometimes need to create or delete symbol...

How to execute Linux shell commands in Docker

To execute a shell command in Docker, you need to...

How to use CocosCreator object pool

Table of contents Preface: Specific operations St...

Knowledge about MySQL Memory storage engine

Knowledge points about Memory storage engine The ...

Summary of basic usage of js array

Preface Arrays are a special kind of object. Ther...

After installing Navicat in MySQL, 2059 appears, Authentication plugin and local link virtual machine docker, remote link server

Preface After installing MySQL and Navicat, when ...

How to prevent Flash from covering HTML div elements

Today when I was writing a flash advertising code,...

CSS3 filter code to achieve gray or black mode on web pages

front end css3,filter can not only achieve the gr...

Solve the problem of inconsistent MySQL storage time

After obtaining the system time using Java and st...

Detailed process of installing logstash in Docker

Edit docker-compose.yml and add the following con...

How to configure static network connection in Linux

Configuring network connectivity for Linux system...

How to set up Referer in Nginx to prevent image theft

If the server's images are hotlinked by other...

MySQL master-slave synchronization, implementation principle of transaction rollback

BinLog BinLog is a binary log that records all da...

Detailed explanation of Nginx reverse proxy example

1. Reverse proxy example 1 1. Achieve the effect ...