現(xiàn)在實現(xiàn)的有基礎(chǔ)用法、可清空、密碼框，參考鏈接：https://element.eleme.cn/#/zh-CN/component/input
HTML代碼：想要測試哪個組件，直接將對應(yīng)組件解開注釋即可，標紅的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實現(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代碼：
|
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='請輸入內(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代碼：
|
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;} |
剩下的功能會慢慢被完善......
到此這篇關(guān)于純生js實現(xiàn)Element中input組件的部分功能（慢慢完善）并封裝成組件的文章就介紹到這了,更多相關(guān)js實現(xiàn)input組件功能內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/qcq0703/archive/2021/02/27/14456418.html
