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 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 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
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP微信API接口类
2016/08/22 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
php桥接模式应用案例分析
2019/10/23 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
python批量提取word内信息
2015/08/09 Python
python读取中文txt文本的方法
2018/04/12 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
灵泰克Java笔试题
2016/01/09 面试题
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
个人批评与自我批评
2014/10/15 职场文书
致运动员赞词
2015/07/22 职场文书
老乡会致辞
2015/07/28 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL