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>
赞 (0)

相关推荐

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • JS实现仿google、百度搜索框输入信息智能提示的实现方法

    本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • JS+CSS实现仿新浪微博搜索框的方法

    本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • javascript搜索框点击文字消失失焦时文本出现

    当获焦时,文本消失,失焦时文本出现 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="text" type="text" value="点我就消失"/> <scrip

  • javascript搜索框效果实现方法

    本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • JavaScript实现搜索框的自动完成功能(一)

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

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

    废话不多说了,直接给大家贴js搜索框文字可删除功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实现搜索框文字可删除</title> <style> *:focus {outline: none; } body {width: 400px;margin: 100px auto;} #topsearch {

  • JS实现微信弹出搜索框 多条件查询功能

    JS实现微信弹出搜索框 多条件查询功能

    效果图如下所示: JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示: <!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>--> <!DOCTYPE html> <

  • JS实现搜索关键词的智能提示功能

    JS实现搜索关键词的智能提示功能

    最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示 比如 我输入杨字,他会给我提示以下搜索提示 我尝试着用JavaScript做了一个类似的练习,以下是我用VS2013写的代码,有不对的地方,请不吝赐教. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

  • 微信小程序仿淘宝热搜词在搜索框中轮播功能

    摘要 逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率.就在小程序中试着实现实现. 效果 体验 实现思路 思路比较简单,主要是两点, 1:input处于热搜提示词上层,用z-index实现 2:热搜词轮播用swiper实现,方向为vertical 3:在input聚焦时获取swiper当前值,设置为placeholder 4:将swiper隐藏 代码 已封装成组件 组件代码: wxs

  • 基于JS实现移动端左滑删除功能

    基于JS实现移动端左滑删除功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <div class="wrap pay-wrap" id="lists"> @foreach (var item in Model) { <div class="pay-list" style="height:90px;margin: 10px 15px 10px 15px;" id="@item.UID"> <div c

  • js实现input框文字动态变换显示效果

    js实现input框文字动态变换显示效果

    本文实例讲述了js实现input框文字动态变换显示效果.分享给大家供大家参考.具体如下: 这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,依次调用显示,有意思吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-txt-rand-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • Android自定义View实现搜索框（SearchView）功能

    Android自定义View实现搜索框（SearchView）功能

    概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自动补全信息可以不只是纯文本,还可以像豌豆荚这样,能显示相应的图片和其他数据信息,因此Android给我们提供的AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框. 分析 根据上面这张图,简单分析一下自定义搜索框的结构与功能,有 1. 搜索界面大致由三部门组成

  • 使用Ajax模仿百度搜索框的自动提示功能实例

    啊啊,熬夜了.今天学习了ajax给我的感觉就是,"哇塞"ajax好酷炫哦,(额...后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把.Let's go! 百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述.直接看代码 来我们写一个简陋的jsp页面 Look! 是这个样子的 下面是代码: <%@ page language="java" contentType="text/html; charset=UTF-8" page

随机推荐