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组件功能内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• JavaScript axios安装与封装案例详解
• 深入浅析同源与跨域,jsonp(函数封装),CORS原理
• vue.js管理后台table组件封装的方法
• 详解JavaScript面向对象实战之封装拖拽对象
• 原生js封装无缝轮播功能
• 原生JS封装vue Tab切换效果
• js实现封装jQuery的简单方法与链式操作详解
• JavaScript实现原型封装轮播图
• JavaScript缓动动画函数的封装方法
• javascript canvas封装动态时钟
• 关于Jackson的JSON工具类封装 JsonUtils用法
• JavaScript封装单向链表的示例代码
• 常用的前端JavaScript方法封装

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！