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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
HTML中事件触发列表与解说
Jul 09 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
Vue Element校验validate的实例
Sep 21 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
mysql limit查询优化分析
2008/11/12 PHP
php防盗链的常用方法小结
2010/07/02 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
JS实现碰撞检测的方法分析
2018/01/19 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python进阶教程之动态类型详解
2014/08/30 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python实现自动访问网页的例子
2020/02/21 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
自动化专业个人求职信范文
2013/11/29 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
财务工作失误检讨书
2015/02/19 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python