现在实现的有基础用法、可清空、密码框，参考链接：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. 爬虫入门到放弃系列02：html网页如何解析

    前言 上一篇文章讲了爬虫的概念,本篇文章主要来讲述一下如何来解析爬虫请求的网页内容. 一个简单的爬虫程序主要分为两个部分,请求部分和解析部分.请求部分基本一行代码就可以搞定,所以主要来讲述一下解析部分 ...

  2. 【算法】数据结构与算法基础总览（中）——刷Leetcode等算法题时一些很实用的jdk辅助方法锦集

    最近重新学习数据结构与算法以及刷leetcode算法题时,发现不少jdk自带的方法可以提升刷题的效率.这些小技巧不仅仅对刷算法题带来便利,对我们平时开发也是很有帮助的.本文以java语言为基础,记录了 ...

  3. 【noi 2.2_8758】2的幂次方表示（递归）

    题意:将正整数N用2的幂次方表示(彻底分解至2(0),2). 解法:将层次间和每层的操作理清楚,母问题分成子问题就简单了.但说得容易,操作没那么容易,我就打得挺纠结的......下面附上2个代码,都借 ...

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

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

  5. 煎蛋网爬虫之JS逆向解析img路径

    图片使用js onload事件加载 <p><img src="//img.jandan.net/img/blank.gif" onload="janda ...

  6. Chrony时间同步

    chrony 服务器 yum -y install chrony cp /etc/chrony.conf{,.bak} #备份默认配置 cat > /etc/chrony.conf <&l ...

  7. 弹性计算服务（Elastic Compute Service） / 云服务器 ECS

    计费方式选择 多种可选择计算费用的方式,可以包年包月,按流量计费,按资源规格计费(本文第四点)等等 地域位置选择 地域:地域指的是 ECS 实例所在的物理位置 地域位置如何选择: 根据访问业务的用户比 ...

  8. Nginx 动静分离概述

    目录 Nginx 动静分离是什么 Nginx 动静分离配置 Nginx 动静分离是什么 Nginx 动静分离,指的是静态资源请求由 Nginx 处理,动态资源请求由 php-fpm 处理或 tomca ...

  9. 仿射加密与S-DES加密算法的实现

    仿射加密 #include <iostream> #include <cstdio> using namespace std; char letter[30]; char _l ...

  10. zsh & for loop bug

    zsh & for loop bug ​for: command not found syntax error near unexpected token do' do' Unicode 编码 ...