纯生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 ...
随机推荐
- 掌握数位dp
最近遇到了数位dp题目,于是就屁颠屁颠的跑过来学习数位dp了~ "在信息学竞赛中,有这样一类问题:求给定区间中,满足给定条件的某个D 进制数或此类数的数量.所求的限定条件往往与数位有关,例如 ...
- hdu5893 List wants to travel(树链剖分+线段树)
Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Submissi ...
- AtCoder Beginner Contest 164
比赛链接:https://atcoder.jp/contests/abc164 A - Sheep and Wolves #include <bits/stdc++.h> using na ...
- P2062 分队问题（DP）
题目描述 给定n个选手,将他们分成若干只队伍.其中第i个选手要求自己所属的队伍的人数大等于a[i]人. 在满足所有选手的要求的前提下,最大化队伍的总数. 注:每个选手属于且仅属于一支队伍. 输入输出格 ...
- AcWing 243. 一个简单的整数问题2 (树状数组,区间更新/询问)
题意:区间更新,区间询问. 题解;对于区间更新,我们还是用差分数组\(b_i\)来更新,区间询问时,我们的答案是:\(\sum_{i=l}^{r}\sum_{j=1}^{i}b_j\), 所以,我们搞 ...
- 带有Python的音频处理（附带源码）
由于博客播放不了音频,所以音频将以视频形式展现.公众号也正在进行抽书 音频素材请点击这里进行观看 往下拉就是文章地址 有时,在进行编程时,我们需要进行一些音频处理.编程中最常用的音频处理任务包括–加载 ...
- Redis 管理命令
INFO 命令 # 查看redis相关信息 127.0.0.1:6379> info # 服务端信息 # Server # 版本号 redis_version:3.2.12 # redis版本控 ...
- CF 1477A. Nezzar and Board
传送门 思路: 从k = 2 * x - y ==> 2 * x = k + y ,可以看出x是k,y的中间值,则如果存在x1,x2,且x1 = x2 ± 1,则通过x1,x2可以得到所有整数, ...
- 机器学习入门实战——基于knn的airbnb房租预测
数据读取 import pandas as pd features=['accommodates','bathrooms','bedrooms','beds','price','minimum_nig ...
- GPU 加速 & WebGL
GPU 加速 & WebGL 开启 GPU 加速, 硬件加速 垃圾面试官,瞎忽悠 holy shit 美国想象力英语,前端 leader WebGL 加速 ??? 是什么鬼 ??? three ...