纯生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 ...

随机推荐

NodeMCU使用ArduinoJson判断指定键值对存在与否
NodeMCU使用ArduinoJson判断指定键值对存在与否从ArduinoJson库中可以得知,判断键值对是否存在可以使用containskey()函数,但是查看ArduinoJson-cont ...
UI和3D物体的堆叠响应
一.问题:当3D物体和UI元素重叠显示时一般UI元素会遮挡物体,这时点击UI元素响应时UI后方的物体也会响应. private void OnMouseDown() { ChangeColor(); ...
linux（10）linux vi/vim
前言所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是vim编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的 ...
MiniProfiler性能分析工具— .Net Core中用法
前言: 在日常开发中,应用程序的性能是我们需要关注的一个重点问题.当然我们有很多工具来分析程序性能:如:Zipkin等:但这些过于复杂,需要单独搭建. MiniProfiler就是一款简单,但功能强大 ...
D-DP
必备知识树链剖分,最大权独立集(即没有上司的舞会(树上DP)),矩阵乘法; D-DP 模版简述模板关于动态DP,其实是关于一类动态修改点权的问题,但是很难去处理; 我们平常的DP ...
AtCoder Beginner Contest 162
比赛链接:https://atcoder.jp/contests/abc162/tasks A - Lucky 7 #include <bits/stdc++.h> using names ...
【uva 1515】Pool construction（图论--网络流最小割模型题）
题意:有一个水塘,要求把它用围栏围起来,每个费用为b.其中,(#)代表草,(.)代表洞,把一个草变成洞需要费用d, 把一个洞变成草需要费用f.请输出合法方案中的最小费用. 解法:(不好理解...... ...
zoj3299 Fall the Brick
Time Limit: 3 Seconds Memory Limit: 32768 KB Now the God is very angry, so he wants to punish t ...
Docker运行时资源限制
Docker 运行时资源限制Docker 基于 Linux 内核提供的 cgroups 功能,可以限制容器在运行时使用到的资源,比如内存.CPU.块 I/O.网络等. 内存限制概述Docker 提供的 ...
Nginx基础 - 配置静态web服务
1.静态参数配置1)文件读取高效sendfile Syntax: sendfile on | off; Default: sendfile off; Context: http, server, lo ...

纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件

纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件的更多相关文章

随机推荐

热门专题