服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - js实现Element中input组件的部分功能并封装成组件(实例代码)

js实现Element中input组件的部分功能并封装成组件(实例代码)

2022-01-25 16:02背着泰山找黄河 js教程

这篇文章主要介绍了纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

现在实现的有基础用法、可清空、密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input

js实现Element中input组件的部分功能并封装成组件(实例代码)

js实现Element中input组件的部分功能并封装成组件(实例代码)

js实现Element中input组件的部分功能并封装成组件(实例代码)

HTML代码:想要测试哪个组件,直接将对应组件解开注释即可,标红的js和css记得修改成你自己的位置。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js实现可清空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"))
      //实现密码框show-password
      //document.write(createElementInput("show-password"))
    </script>
  </body>
</html>

JS代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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='请输入内容'";
  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"
    }
  }
}
//应该输入内容之后使用该事件
function addClearNode(str){
  var value = 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 = "";
  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代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#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;
}

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

到此这篇关于纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件的文章就介绍到这了,更多相关js实现input组件功能内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://www.cnblogs.com/qcq0703/archive/2021/02/27/14456418.html

延伸 · 阅读

精彩推荐
  • js教程three.js 实现露珠滴落动画效果的示例代码

    three.js 实现露珠滴落动画效果的示例代码

    这篇文章主要介绍了three.js 实现露珠滴落动画效果的示例代码,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    稀土掘金11192022-01-24
  • js教程javascript实现下拉菜单效果

    javascript实现下拉菜单效果

    这篇文章主要为大家详细介绍了javascript实现下拉菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    爱前端的茂茂7272022-01-20
  • js教程JavaScript this关键字的深入详解

    JavaScript this关键字的深入详解

    这篇文章主要给大家介绍了关于JavaScript this关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    JAVA_朴先生9062021-12-31
  • js教程JavaScript实现通讯录功能

    JavaScript实现通讯录功能

    这篇文章主要为大家详细介绍了JavaScript实现通讯录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    书写梦想的铅笔头5752021-12-20
  • js教程JavaScript 生成唯一ID的几种方式

    JavaScript 生成唯一ID的几种方式

    这篇文章主要介绍了JavaScript 生成唯一ID的几种方式,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    specialCoder4942022-01-21
  • js教程详解ES6 中的Object.assign()的用法实例代码

    详解ES6 中的Object.assign()的用法实例代码

    这篇文章主要介绍了ES6 Object.assign()的用法及用途,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    半夏遮流年シ11482021-12-30
  • js教程javascript实现固定侧边栏

    javascript实现固定侧边栏

    这篇文章主要为大家详细介绍了javascript实现固定侧边栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    爱前端的茂茂3482022-01-20
  • js教程Javascript实现打鼓效果

    Javascript实现打鼓效果

    这篇文章主要为大家详细介绍了Javascript实现打鼓效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    qq_413093507512022-01-11