js實(shí)現(xiàn)在input框中動態(tài)添加圖標(biāo)

harriszh 發(fā)布于2019-08-23 13:55 / 2730人閱讀

摘要：本例說的應(yīng)用場景比如有在框架中輸入字符后，右邊會出現(xiàn)一個(gè)叉叉清除的按鈕比如下圖代碼關(guān)鍵詞代碼動態(tài)生成的圖標(biāo)對象開始輸入時(shí)動態(tài)生成判斷圖標(biāo)對象是否存在只有，所以通過定位實(shí)現(xiàn)到最右邊移除圖標(biāo)對象

本例說的應(yīng)用場景比如有在input框架中輸入字符后，右邊會出現(xiàn)一個(gè)叉叉清除的按鈕,比如下圖：

HTML代碼：

JS代碼：

function clearInput(obj) {
    let clearObj = document.getElementById("clear-input"); //動態(tài)生成的圖標(biāo)對象
    
    if(obj.value.length>0){//開始輸入時(shí)動態(tài)生成
    
        if(!document.body.contains(clearObj)){//判斷圖標(biāo)對象是否存在
        
            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，所以通過定位實(shí)現(xiàn)到最右邊
        }
    }else{
        obj.parentNode.removeChild(clearObj); //移除圖標(biāo)對象
    }
}

云服務(wù)器 GPU云服務(wù)器 input圖標(biāo) js動態(tài)添加數(shù)據(jù) js動態(tài)添加標(biāo)簽 js動態(tài)添加刷新

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99788.html

相關(guān)文章

基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說明）

摘要：改進(jìn)原控件無法切換語言的，支持和。日歷面板增加一個(gè)位置選項(xiàng)，允許讓面板右對齊，只需要即可。原事件只有在時(shí)才生效，現(xiàn)改為一直有效，這樣當(dāng)用戶點(diǎn)擊日歷面板上的日期后就可以觸發(fā)該事件。一，前言我是剛學(xué)Vue的菜鳥，在使用過程中需要用到日歷控件，由于項(xiàng)目中原來是用jQuery寫的，因此用了bootstarp的日歷控件，但是配合Vue實(shí)在有點(diǎn)蛋疼，不夠優(yōu)雅…… 于是網(wǎng)上搜...

番茄西紅柿 2019-04-23 11:41 評論0 收藏0
JS學(xué)習(xí)筆記（第14章）（表單腳本）

摘要：布爾值，表示當(dāng)前字段是否被禁用。指向當(dāng)前字段所屬表單的指針只讀。文本框腳本在中，有兩種方式來表現(xiàn)文本框一種是使用元素的單行文本框，另一種是使用的多行文本框。然后，我們把這個(gè)函數(shù)指定為每個(gè)文本框的事件處理程序。本章知識架構(gòu) showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...

BlackHole1 2019-08-26 10:23 評論0 收藏0
新手零基礎(chǔ)入門小程序之萬達(dá)電影

摘要：項(xiàng)目名稱我這里是模仿萬達(dá)電影小程序，你也可以自己換一個(gè)，這里隨意。如果你是一個(gè)小白，想學(xué)習(xí)或者了解小程序，但是不知從何下手，那么這篇文章應(yīng)該會對你有所幫助，如果您是一位大佬，那么這篇文章歡迎您吐槽！什么是小程序？小程序是微信新推出來的一種連接用戶與服務(wù)的方式。是一種不需安裝下載就能使用的應(yīng)用。實(shí)現(xiàn)了用完即走的夢想。小程序的優(yōu)勢不用安裝，即開即用，省流量，不占用桌面對于小程...

CompileYouth 2019-08-22 11:15 評論0 收藏0
AngularJS對動態(tài)增加的DOM實(shí)現(xiàn)ng-keyup事件

摘要：我在想這個(gè)是這么實(shí)現(xiàn)的想了一下有這么一個(gè)思路普通情況下這個(gè)是一個(gè)或元素，點(diǎn)擊之后變成一個(gè)元素，鼠標(biāo)離開則變回原元素。我們經(jīng)常在網(wǎng)頁中看到這種形式的內(nèi)容，如圖： showImg(https://segmentfault.com/img/bV5qDH?w=180&h=48); 用鼠標(biāo)點(diǎn)擊一下，就變成了一個(gè)input，如圖： showImg(https://segmentfault.com...

Forelax 2019-08-22 15:16 評論0 收藏0
面向未來的Web Components UI組件庫

摘要：是一套使用原生規(guī)范開發(fā)的跨框架組件庫。真正意義上實(shí)現(xiàn)了樣式和功能的組件化。比如有一個(gè)點(diǎn)擊擴(kuò)散的水波紋效果，就是采用來實(shí)現(xiàn)，只是輔助完成鼠標(biāo)位置的獲取詳細(xì)可查看源碼。組件使用了屬性。 xy-ui xy-ui是一套使用原生Web Components規(guī)范開發(fā)的跨框架UI組件庫。查看文檔風(fēng)格參考Ant Design、Metiral Design。 github項(xiàng)目地址 showImg(ht...

lei___ 2019-08-23 18:35 評論0 收藏0