纯生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实现element中可清空的输入框（2）
接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...
- 使用纯生js实现图片轮换
效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- ASP.NET js控制treeview中的checkbox实现单选功能
ASP.NET js控制treeview中的checkbox实现单选功能 function OnTreeNodeChecked() { var element = window.event.srcEl ...
- js实现reqire中的amd，cmd功能
js实现reqire中的amd,cmd功能 ,大概实现了 路径和模块 引入等重要功能. 本帖属于原创,转载请出名出处. <!DOCTYPE html PUBLIC "-//W3C//D ...
- 使用纯生js操作cookie
前段时间做项目的时候要使用js操作cookie,jquery也有相应的插件,不过还是觉得纯生的js比较好,毕竟不依赖jq. //获得coolie 的值 function cookie(name) { ...
- element中 input赋值后无法再次输入值
项目中有个需求,在表格里点击某条数据弹出窗口进行修改值,当时弹出的是input上进行修改,所以当我点击数据的时候,先进行回显原先的数据,再进行修改. 点击某条数据,弹出窗口,进行后台请求,将后台返回的 ...
- 头部布局，搜索验证和AJAX自动搜索提示，并封装成组件，提高代码复用性
index.html 头部区结构和样式 效果图 静态样式 index.html中的部分 <!-- 头部 --> <div class="header"> & ...
- vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法
使用方法: 引入并注册组件,然后直接使用: @getcode是同步获取编辑器内容的::contentDefault是编辑器的默认内容: 注意:如果同一个页面多个编辑器,参数id不能相同,否则只有第一个 ...
- 解决Echarts封装成组件时只有最后一个才会缩放的问题
参考了此文,并且强烈建议去看http://blog.csdn.net/crper/article/details/76091755 一般网上的方法都是 mounted() { this.drawCha ...
随机推荐
- JVM探究——转载
JVM探究 请你谈谈你对JVM的理解 Java8虚拟机和之前的变化更新 什么式OOM,什么是栈溢出StackOverFlowError?怎么分析 JVM的常用调优参数有哪些? 内存快照如何抓取,怎么分 ...
- Linux 下mv和cp命令
注意事项:mv与cp的结果不同,mv好像文件"搬家",文件个数并未增加.而cp对文件进行复制,文件个数增加了. 一.cp命令 cp命令用来将一个或多个源文件或者目录复制到指定的目的 ...
- 2019牛客暑期多校训练营（第一场）A Equivalent Prefixes
传送门 题意: 先输入一个n,代表两个数组里面都有n个数,然后让你从中找到一个p<=n,使其满足(1<=l<=r<=p<=n)可以让在(l,r)这个区间内在两个数组中的的 ...
- 2020-2021 ICPC, NERC, Southern and Volga Russian Regional Contest (Online Mirror, ICPC Rules) C. Berpizza (STL)
题意:酒吧里有两个服务员,每个人每次都只能服务一名客人,服务员2按照客人进酒吧的顺序服务,服务员3按照客人的钱来服务,询问\(q\),\(1\)表示有客人进入酒吧,带着\(m\)块钱,\(2\)表示询 ...
- Codeforces Round #672 (Div. 2) C1. Pokémon Army (easy version) (DP)
题意:给你一组数\(a\),构造一个它的子序列\(b\),然后再求\(b_1-b2+b3-b4...\),问构造后的结果最大是多少. 题解:线性DP.我们用\(dp1[i]\)来表示在\(i\)位置, ...
- C# 数据类型(3)
动态类型 dynamic types 动态类型是后来引进的,他其实是一个static type,但是不像其他的静态类型,编译器不会检查你到底是啥类型(也不会检查你能不能去call某个'method') ...
- JPG学习笔记3（附完整代码）
#topics h2 { background: rgba(43, 102, 149, 1); border-radius: 6px; box-shadow: 0 0 1px rgba(95, 90, ...
- Promise thenable All In One
Promise thenable All In One Promise thenable 是指一个函数或一个对象的里面定义了一个 then 方法 Promises/A+ https://promise ...
- js sort map by key
js sort map by key Map map to array // Array.from() Object let obj = {}; for(let key of Object.keys( ...
- window.ShadyCSS
window.ShadyCSS Web Components # install $ yarn add @webcomponents/shadycss@1.7.1 # OR $ npm i @webc ...