js實現在input框中動態添加圖標

harriszh 發布于2019-08-23 13:55 / 2635人閱讀

摘要：本例說的應用場景比如有在框架中輸入字符后，右邊會出現一個叉叉清除的按鈕比如下圖代碼關鍵詞代碼動態生成的圖標對象開始輸入時動態生成判斷圖標對象是否存在只有，所以通過定位實現到最右邊移除圖標對象

本例說的應用場景比如有在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); //移除圖標對象
    }
}

云服務器 GPU云服務器 input圖標 js動態添加數據 js動態添加標簽 js動態添加刷新

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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