JS实现搜索框文字可删除功能


Posted in Javascript onDecember 28, 2016

废话不多说了,直接给大家贴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实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 #Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 #Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 #Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 #Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 #Javascript
AngularJS实现网站换肤实例
Feb 19 #Javascript
详解js树形控件—zTree使用总结
Dec 28 #Javascript
You might like
php 文件上传系统手记
2009/10/26 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php制作动态随机验证码
2015/02/12 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
Python实现的爬虫功能代码
2017/06/24 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
幼儿教师培训感言
2014/03/08 职场文书
重阳节慰问信
2015/02/15 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python