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

网络编程 2025/10/30 佚名

3 2 1

现在实现的有基础用法、可清空、密码框，参考链接：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="/UploadFiles/2021-04-02/jsInput.js">

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实现input组件功能,js实现Element中input组件

标签：

js实现input组件功能,js实现Element中input组件

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

暂无“js实现Element中input组件的部分功能并封装成组件(实例代码)”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2025年10月30日

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

js实现input组件功能,js实现Element中input组件

JavaScript实现筛选数组

html5以及jQuery实现本地图片上传前的预览代码实例讲解

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

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接