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>
相关文章
解析XML的方法有很多，在本文要为大家介绍下是使用AJAX的JS、JQuery两种方式来进行解析，具体实现如下，感兴趣的朋友可以参考下2013-09-09
在前台开发中会涉及页面跳转的问题,下面这篇文章主要给大家总结介绍了关于JavaScript实现页面跳转的5种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
本文主要介绍了JavaScript 对象合并的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
Bootstrap CSS组件之下拉菜单(dropdown)
这篇文章主要为大家详细介绍了Bootstrap CSS组件之下拉菜单(dropdown),具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
这篇文章主要为大家详细介绍了bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本节主要介绍了用js判断日期是否能跨月查询,需要的朋友可以参考下2014-07-07
这篇文章主要为大家详细介绍了微信小程序实现时间预约基本功能，一个类似电商的时间预约功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家详细介绍了JavaScript实现网页版的五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
JavaScript Window 打开新窗口(window.location.href、windo
本文主要介绍了JavaScript Window 打开新窗口的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。这篇文章主要介绍了webpack源码之compile流程-入口函数run,需要的朋友可以参考下2017-12-12
最新评论