输入框自带清除按钮


今天碰到一个需求是在输入框中,当输入框中输入文字时,显示清除按钮。

在网上找了一个案例,https://blog.csdn.net/qq_26780317/article/details/79002409,

是基于jquery实现的,我又基于原生js,写了一个。

html代码和案例中的一致,获取焦点的js代码如下:

var searchInput = document.getElementById("searchInput");
var clearInput =document.getElementById("searchTextCancel");
//输入框input获取焦点事件
searchInput.onfocus=lang.hitch(this,function(){
clearInput.style.display="block";
});

//输入框input失去焦点事件
searchInput.onblur=lang.hitch(this,function(){
if(searchInput.value == ""){
clearInput.style.display="none";
}
});

//输入框清除按钮点击事件
clearInput.onclick=lang.hitch(this,function(){
searchInput.value = "";
clearInput.style.display="none";
});

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM