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

MySql sets the specified user database view query permissions

1. Create a new user: 1. Execute SQL statement to...

Linux common basic commands and usage

This article uses examples to illustrate common b...

MySQL 5.5.56 installation-free version configuration method

The configuration method of MySQL 5.5.56 free ins...

Explanation of the basic syntax of Mysql database stored procedures

drop procedure sp_name// Before this, I have told...

Example of converting timestamp to Date in MySQL

Preface I encountered a situation at work: In the...

Detailed explanation of MySQL master-slave replication and read-write separation

Table of contents Preface 1. Overview 2. Read-wri...

Project practice of deploying Docker containers using Portainer

Table of contents 1. Background 2. Operation step...

Examples of correct use of interface and type methods in TypeScript

Table of contents Preface interface type Appendix...

MySQL 8.0.17 installation graphic tutorial

This article shares with you the MySQL 8.0.17 ins...

CSS Sticky Footer Implementation Code

This article introduces the CSS Sticky Footer imp...

A detailed tutorial on how to install Jenkins on Docker for beginners

Jenkins is an open source software project. It is...

Mysql database scheduled backup script sharing

BackUpMysql.sh script #!/bin/bash PATH=/bin:/sbin...

MySQL restores data through binlog

Table of contents mysql log files binlog Binlog l...

Some simple implementation codes of the form element take registration as an example

Code implementation: Copy code The code is as fol...

MySQL database JDBC programming (Java connects to MySQL)

Table of contents 1. Basic conditions for databas...