现在实现的有基础用法、可清空、密码框，参考链接：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. Kwp2000协议的应用（程序后续篇）

    作者:良知犹存 转载授权以及围观:欢迎添加微信:becom_me 总述 接上篇文章,本篇继续对基于PID解析数据,如何依据J1979的标准进行解析数据 先给昨天的文章补上一张故障码对照表,昨天分析了如 ...

  2. Hbase Java API包括协处理器统计行数

    package com.zy; import java.io.IOException; import org.apache.commons.lang.time.StopWatch; import or ...

  3. 【poj 2891】Strange Way to Express Integers（数论--拓展欧几里德 求解同余方程组 模版题）

    题意:Elina看一本刘汝佳的书(O_O*),里面介绍了一种奇怪的方法表示一个非负整数 m .也就是有 k 对 ( ai , ri ) 可以这样表示--m%ai=ri.问 m 的最小值. 解法:拓展欧 ...

  4. Codeforces Round #666 (Div. 2) B. Power Sequence (枚举)

    题意:有一个长度为\(n\)的序列,你每次可以对序列重新排序,然后花费\(1\)使某个元素加减\(1\),多次操作后使得新序列满足\(a_{i}=c^i\),\(c\)是某个正整数,求最小花费. 题解 ...

  5. 向Pycharm中导入第三方包 && 更改Pycharm上镜像源

    一.Pycharm本身导包 下载成功会这个样子(如下图) 但是有时因为包的版本太高,代码运行出错,此时需要选中右下角的Specify version,然后选择想要的版本即可 如果还出错,那就在命令行下 ...

  6. Ancient Printer HDU - 3460 贪心+字典树

    The contest is beginning! While preparing the contest, iSea wanted to print the teams' names separat ...

  7. HDU 4335 What is N?（指数循环节）题解

    题意: 询问有多少数\(n\)满足\(n^{n!}\equiv b\mod p \land\ n\in[1,M]\),数据范围:\(M\leq2^{64}-1,p\leq1e5\) 思路: 这题显然要 ...

  8. bzoj1013球形空间产生器sphere 高斯消元(有系统差的写法

    Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁 ...

  9. js sort tricks All In One

    js sort tricks All In One js 排序技巧 const arr = [ { label: 'False 1 ', disabled: false, }, { label: 'F ...

  10. 如何强制删除 baidu/tempdata/con.dat 的垃圾文件！ How to fix locked SD card： 读卡器 损坏，补救措施！

    https://www.youtube.com/watch?v=y2c37dcxNto&feature=youtu.be 使用windows command prompt 强制删除 baidu ...