纯生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 ...
随机推荐
- docker 搭建 nginx负载均衡
本文描述如何在一台机器上搭建nginx负载均衡,我将会启动3个nginx的docker,分别是1台前置nginx负责分发,后面2台负责处理请求. 首先我切换到/usr/local/docker/文件夹 ...
- Andrew算法（我确实不懂Graham）
先解释一下:这两个算法分别都是凸包问题的算法,然后Andrew是Graham的变种,速度更快,更稳定,非常优秀,介于我已经把Graham写的莫名其妙的WA了,所以我选择了这种算法! 我认为在这里,还是 ...
- 【noi 2.5_1792】迷宫（bfs 或 dfs）
简单搜索,在n*n的矩阵中,问从起点是否可以到达终点,有些格子不可走,上下左右四个方向都可以走.(N<=100)1.bfs从起点开始走,直到走到终点或全部遍历过一次就结束.2.dfs要一走到终点 ...
- c语言实现--带头结点单链表操作
可能是顺序表研究的细致了一点,单链表操作一下子就实现了.这里先实现带头结点的单链表操作. 大概有以下知识点. 1;结点:结点就是单链表中研究的数据元素,结点中存储数据的部分称为数据域,存储直接后继地址 ...
- Codeforces Round #653 (Div. 3) E1. Reading Books (easy version) (贪心,模拟)
题意:有\(n\)本书,A和B都至少要从喜欢的书里面读\(k\)本书,如果一本书两人都喜欢的话,那么他们就可以一起读来节省时间,问最少多长时间两人都能够读完\(k\)本书. 题解:我们可以分\(3\) ...
- Educational Codeforces Round 91 (Rated for Div. 2) A. Three Indices (模拟)
题意:有一长度为\(n\)的序列,问是否能找到\(a_{i}<a_{j},a_{j}>a_{k},(i<j<k)\),如果满足,输出其位置. 题解:直接暴力两头找即可,最坏复杂 ...
- 二进制安装kubernetes（六） kube-proxy组件安装
Kube-Proxy简述 参考文献: https://ywnz.com/linuxyffq/2530.html 运行在每个节点上,监听 API Server 中服务对象的变化,再通过管理 IPtabl ...
- ElasticSearch 7.x 学习
目录 ElasticSearch 7.x 一.前言 1.1.正向索引和倒排索引 1.1.1.正向索引 1.1.2.倒排索引 二.安装 三.ES 基本概念 3.1.索引 3.2.文档 3.4.mappi ...
- 指纹采集器Live 20R
最近有个项目需要使用指纹采集器Live 20R,买来这个小玩意后不知道怎么用,看了一些教程和自己摸索了一下,才初步掌握了用的方法. 环境: 硬件:联想 小新 操作系统:Win 10 IDE:VS201 ...
- 011.NET5_MVC解读Razor混编
MVC开发 1. 什么是MVC? V-视图,呈现给用户看到的内容---表现层 C-控制器,控制业务逻辑计算,可定义多种返回类型.可以是视图模型.JSON.字符串等等 M-视图模型,用于视图和控制之间传 ...