好资源导航 » 文章资讯 » js实现Element中input组件的部分功能并封装成组件(实例代码)

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

2023-07-04 23:08:13 73

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

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





js实现可清空input组件

JS代码：

functioncreateElementInput(str){
vartemp=str;
varhtml="";
html+="";
if(str){
html+="";
}
html+="

" returnhtml; } //box-shadow:00020pxpink;通过添加阴影的方式显示边框 functionchangeColor(str){ //alert(str) document.getElementById("my_input_div").style.boxShadow="0002px#409eff"; //获取inpu的值 varvalue=document.getElementById('my_input').value; varbutton=document.getElementById(str); //添加判断如果输入框中有值则显示清空按钮 if(value){ if(button){ button.style.visibility="visible" } } } //应该输入内容之后使用该事件 functionaddClearNode(str){ varvalue=document.getElementById('my_input').value; varbutton=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="0002px#409eff"; } //改变input中的值 functionchangeValue(str){ if(str){ if(str=='clearable'){ clearValues(str); }elseif(str=='show-password'){ showPassword(); } } } //清空输入值 functionclearValues(str){ document.getElementById("my_input").value=""; document.getElementById(str).style.visibility="hidden"; //仍然处于选中状态div边框突出阴影 document.getElementById("my_input_div").style.boxShadow="0002px#409eff" } //隐藏清除按钮 functionhiddenClearNode(str){ varbutton=document.getElementById(str); if(button){ button.style.visibility="hidden"; } //将div阴影设置为0 document.getElementById("my_input_div").style.boxShadow="000" } //显示密码 functionshowPassword(){ varmyInput=document.getElementById('my_input'); varpassword=myInput.value; vartype=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="0002px#409eff" }

CSS代码：

#my_input_div{
width:150px;
border:1pxsolidsilver;
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组件功能内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐