现在实现的有基础用法、可清空、密码框，参考链接：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组件的部分功能（慢慢完善）并封装成组件的更多相关文章

  1. js实现element中可清空的输入框（2）

    接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...

  2. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. ASP.NET js控制treeview中的checkbox实现单选功能

    ASP.NET js控制treeview中的checkbox实现单选功能 function OnTreeNodeChecked() { var element = window.event.srcEl ...

  4. js实现reqire中的amd，cmd功能

    js实现reqire中的amd,cmd功能 ,大概实现了 路径和模块 引入等重要功能. 本帖属于原创,转载请出名出处. <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. 使用纯生js操作cookie

    前段时间做项目的时候要使用js操作cookie,jquery也有相应的插件,不过还是觉得纯生的js比较好,毕竟不依赖jq. //获得coolie 的值 function cookie(name) { ...

  6. element中 input赋值后无法再次输入值

    项目中有个需求,在表格里点击某条数据弹出窗口进行修改值,当时弹出的是input上进行修改,所以当我点击数据的时候,先进行回显原先的数据,再进行修改. 点击某条数据,弹出窗口,进行后台请求,将后台返回的 ...

  7. 头部布局，搜索验证和AJAX自动搜索提示，并封装成组件，提高代码复用性

    index.html 头部区结构和样式 效果图 静态样式 index.html中的部分 <!-- 头部 --> <div class="header"> & ...

  8. vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法

    使用方法: 引入并注册组件,然后直接使用: @getcode是同步获取编辑器内容的::contentDefault是编辑器的默认内容: 注意:如果同一个页面多个编辑器,参数id不能相同,否则只有第一个 ...

  9. 解决Echarts封装成组件时只有最后一个才会缩放的问题

    参考了此文,并且强烈建议去看http://blog.csdn.net/crper/article/details/76091755 一般网上的方法都是 mounted() { this.drawCha ...

随机推荐

  1. XV6学习（11）Lab thread: Multithreading

    代码放在github上. 这一次实验感觉挺简单的,特别是后面两个小实验.主要就是对多线程和锁进行一个学习. Uthread: switching between threads 这一个实验是要实现一个 ...

  2. The Preliminary Contest for ICPC Asia Nanjing 2019 A The beautiful values of the palace（树状数组+思维）

    Here is a square matrix of n * nn∗n, each lattice has its value (nn must be odd), and the center val ...

  3. Educational Codeforces Round 94 (Rated for Div. 2)【ABCD】

    比赛链接:https://codeforces.com/contest/1400 A. String Similarity 题意 给出一个长 $2n-1$ 的二进制串 $s$,构造一个长 $n$ 的字 ...

  4. Codeforces Round #655 (Div. 2) A. Omkar and Completion

    题目链接:https://codeforces.com/contest/1372/problem/A 题意 构造一个大小为 $n$ 的数组 $a$,要求满足 $1 \le a_i \le n$,且不存 ...

  5. HDU5213 Lucky【容斥+莫队】

    HDU5213 Lucky 题意: 给出\(N\)个数和\(k\),有\(m\)次询问,每次询问区间\([L1,R1]\)和区间\([L2,R2]\)中分别取一个数能相加得到\(k\)的方案数 题解: ...

  6. 2015 German Collegiate Programming Contest (GCPC 15) + POI 10-T3（12/13）

    $$2015\ German\ Collegiate\ Programming\ Contest\ (GCPC 15) + POI 10-T3$$ \(A.\ Journey\ to\ Greece\ ...

  7. 牛客小白月赛30 J.小游戏 (DP)

    题意:给你一组数,每次可以选择拿走第\(i\)个数,得到\(a[i]\)的分数,然后对于分数值为\(a[i]-1\)和\(a[i]+1\)的值就会变得不可取,问能得到的最大分数是多少. 题解:\(a[ ...

  8. C# 数据类型(2)

    String char的集合 string name = "John Doe"; 双引号,char是单引号string是不可变的,一旦初始化后就不能变了,每次对已存在的string ...

  9. POJ 2288 Islands and Bridges（状压DP）题解

    题意:n个点,m有向边,w[i]表示i的价值,求价值最大的哈密顿图(只经过所有点一次).价值为:所有点的w之和,加上,每条边的价值 = w[i] * w[j],加上,如果连续的三个点相互连接的价值 = ...

  10. Creative Commons : CC (知识共享署名 授权许可)

    1 https://creativecommons.org/      Keep the internet creative, free and open. Creative Commons help ...