js实现Element中input组件的部分功能并封装成组件(实例代码)
更新时间：2021年03月02日 08:23:15 作者：背着泰山找黄河
这篇文章主要介绍了纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
现在实现的有基础用法、可清空、密码框，参考链接：https://element.eleme.cn/#/zh-CN/component/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;
}
剩下的功能会慢慢被完善......
到此这篇关于纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件的文章就介绍到这了,更多相关js实现input组件功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于ECharts数据可视化基本使用之常用图表类型的相关资料,echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,需要的朋友可以参考下2023-11-11
参加某公司的面试后，有一机试题目：用web技术开发一个B/S结构的公式解析器。于是想了想思路，神来一笔想先写个计算器程序做基础，于是便写了这个程序。2009-09-09
这篇文章主要介绍了JS实现数组去重,显示重复元素及个数的方法,涉及javascript数组遍历、统计、计算等相关操作技巧,需要的朋友可以参考下2019-01-01
new大家肯定都不陌生，单身没有对象的时候就new一个，很方便。那么它在创建实例的时候，具体做了哪些操作呢？今天我们就来一起分析一下。2021-04-04
parseInt()不能转换浮点型数值，我们用parseFloat()来解决。这篇文章主要介绍了javascript将非数值转换为数值,需要的朋友可以参考下2018-09-09
本篇文章主要是对fmt:formatDate的输出格式进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01![javascript最短的拖动代码[兼容FF]](//img.jbzj.com/images/xgimg/bcimg6.png)
javascript最短的拖动代码[兼容FF]...2007-10-10
这篇文章主要介绍了JS实现自定义简单网页软键盘效果代码,可实现简单模拟键盘布局及响应鼠标点击按下键盘按键功能,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了Javascript实现秒表倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
相信大家都在地址栏里用javascript:的形式执行过脚本。这种方法简单实用，测试比较短的脚本时经常用到2011-10-10
![javascript最短的拖动代码[兼容FF]](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论