现在实现的有基础用法、可清空、密码框，参考链接：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. Jenkins（1）安装

    前言 jenkins的环境搭建方法有很多,本篇使用docker快速搭建一个jenkins环境. 环境准备: mac/Linux docker docker拉去jenkins镜像 先下载jenkins镜 ...

  2. [CCPC2019网络赛] 1008-Fishing Master（思维）

    >传送门< 题意:现在需要捕$n$条鱼并且将它们煮熟来吃.每条鱼要煮相应的时间才能吃(可以多煮一会),锅里每次只能煮一条鱼,捕一条鱼的时间是相同的,但是在捕鱼的时间内不能做其他事(比如换一 ...

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

    比赛链接:https://codeforces.com/contest/1437 A. Marketing Scheme 题解 令 \(l = \frac{a}{2}\),那么如果 \(r < ...

  4. Educational Codeforces Round 88 (Rated for Div. 2) E. Modular Stability（数论）

    题目链接:https://codeforces.com/contest/1359/problem/E 题意 有一大小为 $k$ 的数组,每个元素的值在 $[1,n]$ 间,若元素间两两不等,问有多少数 ...

  5. c语言实现--顺序表操作

    经过三天的时间终于把顺序表的操作实现搞定了.(主要是在测试部分停留了太长时间) 1;线性表顺序存储的概念:指的是在内存中用一段地址连续的存储单元依次存储线性表中的元素. 2;采用的实现方式:一段地址连 ...

  6. 【史上最全】Hadoop 核心 - HDFS 分布式文件系统详解(上万字建议收藏)

    1. HDFS概述 Hadoop 分布式系统框架中,首要的基础功能就是文件系统,在 Hadoop 中使用 FileSystem 这个抽象类来表示我们的文件系统,这个抽象类下面有很多子实现类,究竟使用哪 ...

  7. Python_微信支付（云开发）

    一.创建云开发小程序 1.初始化云开发环境 //app.js App({ onLaunch: function () { wx.cloud.init({ //初始化云开发环境 env: 'wxypay ...

  8. 使用DTK创建模糊背景窗口并自定义阴影效果

    DTK是deepin开发的基于Qt的开发套件,提供了大量的具有独特风格的美化控件,也提供了很多非常方便的API,下边我们用DTK实现一个模糊窗口,并设置其阴影效果. 使用场景 一切需要模糊窗口作为美化 ...

  9. HDU - 4725 The Shortest Path in Nya Graph 【拆点 + dijkstra】

    This is a very easy problem, your task is just calculate el camino mas corto en un grafico, and just ...

  10. 深入理解JavaScript中的类继承

    由于写本文时全部是在编辑器中边写代码边写感想的,所以,全部思想都写在代码注释里面了 // 类继承 //todo.1 extends 关键字 class Animal { constructor(nam ...