JS实现搜索框文字可删除功能
更新时间：2016年12月28日 10:58:58 作者：旧颜_
本文给大家分享一段js代码实现搜索框文字可删除功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
废话不多说了，直接给大家贴js搜索框文字可删除功能，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现搜索框文字可删除</title>
<style>
*:focus {outline: none; }
body {width: 400px;margin: 100px auto;}
#topsearch {height: 33px;}
#topsearch .input {border: 1px solid #77c03a;height: 100%;}
#topsearch .input .clear {width: 30px;height: 35px;line-height: 30px;text-align: center;padding-right: 10px;visibility: hidden;opacity: 0.8;color: gray;}
#topsearch input[type=text] {height:20px;width: 250px;border: none;padding: 5px;}
#topsearch div {float: left;}
#topsearch button {width: 100px;height: 35px;background: #77c03a;color: #fff;border: none;}
</style>
</head>
<body>
<div id="topsearch">
<div class="input"><input type="text" id="search"><span class="clear" id="delete">×</span></div>
<button type="button" name="searchz">Search</button>
</div>
<script>
document.getElementById("search").addEventListener("keyup", function() {
if (this.value.length > 0) {
document.getElementById("delete").style.visibility = "visible";
document.getElementById("delete").onclick = function() {
document.getElementById("search").value = "";
}
} else {
document.getElementById("delete").style.visibility = "hidden";
}
});
</script>
</body>
</html>
相关文章
这篇文章主要介绍了javascript使用递归算法求两个数字组合功能,结合实例形式分析了JS基于递归算法的数组遍历、判断、转换等相关操作技巧,需要的朋友可以参考下2017-01-01
全局的fetch()方法用于发起获取资源的请求,它返回一个promise,这个promise会在请求响应后被resolve,并传回Response对象,这篇文章主要给大家介绍了关于JavaScript如何拦截全局Fetch的请求与响应的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要为大家详细介绍了微信小程序实现蒙版弹窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
全面解析Bootstrap中tooltip、popover的使用方法
这篇文章主要为大家详细解析了Bootstrap中tooltip、popover的使用方法，了解提示框、弹出框的实现原理，感兴趣的朋友可以参考一下2016-06-06
彪哥1.1(智能表格)提供下载...2006-09-09
这篇文章主要给大家介绍了关于JavaScript中变量提升机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
javascript firefox不显示本地预览图片问题的解决方法
在Firefox一直不能用js做出图片预览的效果，下面这个即可解决，用替换的方法实现firefox支持得的路径格式2008-11-11
这篇文章主要介绍了JavaScript array常用方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这个东东，把我搞得晕晕乎乎的，FF下，没有强制下载文件这个问题。2008-08-08
下面小编就为大家带来一篇弹出遮罩层后禁止滚动效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
最新评论