这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家分享一段 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>
来源: http://www.phperz.com/article/17/0602/329068.html