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

图片描述

HTML代码:

<input type="text" name="keyword" id="" placeholder="关键词" style="width:200px" class=" input-text" value="{$keyword}" oninput="clearInput(this);">

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 = "&#xe6a6;";
            
            obj.parentNode.insertBefore(newNode,obj);//js只有insertBefore,所以通过定位实现到最右边
        }
    }else{
        obj.parentNode.removeChild(clearObj); //移除图标对象
    }
}

破晓起飞
72 声望1 粉丝

php,小程序,前端,NodeJS,linux,APP开发