纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

  • A+
所属分类:Web前端
摘要

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

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

纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

 

 纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

 

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

<!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代码:

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代码:

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

 

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