博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现在input框中动态添加图标
阅读量:7126 次
发布时间:2019-06-28

本文共 712 字,大约阅读时间需要 2 分钟。

本例说的应用场景比如有在input框架中输入字符后,右边会出现一个叉叉清除的按钮,比如下图:

图片描述

HTML代码:

JS代码:

function clearInput(obj) {    let clearObj = document.getElementById("clear-input"); //动态生成的图标对象        if(obj.value.length>0){//开始输入时动态生成            if(!document.body.contains(clearObj)){//判断图标对象是否存在                    var newNode = document.createElement("i");            newNode.style.cssText = "position:relative;left:200px;";            newNode.setAttribute("class","Hui-iconfont");            newNode.setAttribute("id","clear-input");            newNode.innerHTML = "";                        obj.parentNode.insertBefore(newNode,obj);//js只有insertBefore,所以通过定位实现到最右边        }    }else{        obj.parentNode.removeChild(clearObj); //移除图标对象    }}

转载地址:http://lseel.baihongyu.com/

你可能感兴趣的文章
Linux用户和组的操作(三) 用户组文件/etc/group
查看>>
如何在windows上创建能够编译的hypertable工程
查看>>
Linux下文件的三个时间(Atime,Mtime,Ctime)
查看>>
我的友情链接
查看>>
python之字符串操作方法
查看>>
KVM---GUI远程维护管理
查看>>
RHEL6Kickstart无人值守安装
查看>>
u盘安装centos
查看>>
rsync工具介绍、常用选项、通过ssh同步
查看>>
/usr/include/gnu/stubs.h:10:27: fatal error: gnu/stubs-64.h: No such file or directory
查看>>
python入门到放弃02
查看>>
expect 打开文件
查看>>
Bootstrap调研
查看>>
华佗教你睡觉 一定要看
查看>>
我的友情链接
查看>>
Linux中设置服务自启动的三种方式
查看>>
windows应用程序框架及实例
查看>>
frida Hook 重载方法
查看>>
【CentOS 7.1】 mount 3T
查看>>
iOS 性能优化:Instruments 工具的救命三招
查看>>