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


Posted in Javascript onMarch 02, 2021

现在实现的有基础用法、可清空、密码框,参考链接: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;
}

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

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

Javascript 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
微信小程序实现录音Record功能
May 09 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 #Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 #Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
three.js 实现露珠滴落动画效果的示例代码
Mar 01 #Javascript
详解js创建对象的几种方式和对象方法
Mar 01 #Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
Vue的props父传子的示例代码
2020/05/20 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python单链表简单实现代码
2016/04/27 Python
用Python逐行分析文件方法
2019/01/28 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
高三高考决心书
2014/03/11 职场文书
派出所所长先进事迹
2014/05/19 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014年电工工作总结
2014/11/20 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技