JS实现搜索框文字可删除功能
网络编程 2021-07-04 19:20www.168986.cn编程入门
本文给大家分享一段js代码实现搜索框文字可删除功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
废话不多说了,直接给大家贴js搜索框文字可删除功能,具体代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实现搜索框文字可删除</title> <style> *:focus {outline: none; } body {width: 400px;margin: 100px auto;} #search {height: 33px;} #search .input {border: 1px solid #77c03a;height: 100%;} #search .input .clear {width: 30px;height: 35px;line-height: 30px;text-align: center;padding-right: 10px;visibility: hidden;opacity: 0.8;color: gray;} #search input[type=text] {height:20px;width: 250px;border: none;padding: 5px;} #search div {float: left;} #search button {width: 100px;height: 35px;background: #77c03a;color: #fff;border: none;} </style> </head> <body> <div id="search"> <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>
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程