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提交并解析后台返回的XML的代码
Nov 03 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 字符串定义
2009/09/25 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python字节单位转换实例
2019/12/05 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
聚美优品励志广告词
2014/03/14 职场文书
某某同志考察材料
2014/05/28 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS