js实现在input框中动态添加图标

harriszh 发布于2019-08-23 13:55 / 2411人阅读

摘要：本例说的应用场景比如有在框架中输入字符后，右边会出现一个叉叉清除的按钮比如下图代码关键词代码动态生成的图标对象开始输入时动态生成判断图标对象是否存在只有，所以通过定位实现到最右边移除图标对象

本例说的应用场景比如有在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); //移除图标对象
    }
}

海外云主机服务器托管 input图标 js动态添加数据 js动态添加标签 js动态添加刷新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99788.html

基于Vue2-Calendar改进的日历组件（含中文使用说明）

摘要：改进原控件无法切换语言的，支持和。日历面板增加一个位置选项，允许让面板右对齐，只需要即可。原事件只有在时才生效，现改为一直有效，这样当用户点击日历面板上的日期后就可以触发该事件。一，前言我是刚学Vue的菜鸟，在使用过程中需要用到日历控件，由于项目中原来是用jQuery写的，因此用了bootstarp的日历控件，但是配合Vue实在有点蛋疼，不够优雅…… 于是网上搜...

番茄西红柿 2019-04-23 11:41 评论0 收藏0
JS学习笔记（第14章）（表单脚本）

摘要：布尔值，表示当前字段是否被禁用。指向当前字段所属表单的指针只读。文本框脚本在中，有两种方式来表现文本框一种是使用元素的单行文本框，另一种是使用的多行文本框。然后，我们把这个函数指定为每个文本框的事件处理程序。本章知识架构 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...

BlackHole1 2019-08-26 10:23 评论0 收藏0
新手零基础入门小程序之万达电影

摘要：项目名称我这里是模仿万达电影小程序，你也可以自己换一个，这里随意。如果你是一个小白，想学习或者了解小程序，但是不知从何下手，那么这篇文章应该会对你有所帮助，如果您是一位大佬，那么这篇文章欢迎您吐槽！什么是小程序？小程序是微信新推出来的一种连接用户与服务的方式。是一种不需安装下载就能使用的应用。实现了用完即走的梦想。小程序的优势不用安装，即开即用，省流量，不占用桌面对于小程...

CompileYouth 2019-08-22 11:15 评论0 收藏0
AngularJS对动态增加的DOM实现ng-keyup事件

摘要：我在想这个是这么实现的想了一下有这么一个思路普通情况下这个是一个或元素，点击之后变成一个元素，鼠标离开则变回原元素。我们经常在网页中看到这种形式的内容，如图： showImg(https://segmentfault.com/img/bV5qDH?w=180&h=48); 用鼠标点击一下，就变成了一个input，如图： showImg(https://segmentfault.com...

Forelax 2019-08-22 15:16 评论0 收藏0
面向未来的Web Components UI组件库

摘要：是一套使用原生规范开发的跨框架组件库。真正意义上实现了样式和功能的组件化。比如有一个点击扩散的水波纹效果，就是采用来实现，只是辅助完成鼠标位置的获取详细可查看源码。组件使用了属性。 xy-ui xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。查看文档风格参考Ant Design、Metiral Design。 github项目地址 showImg(ht...

lei___ 2019-08-23 18:35 评论0 收藏0