搜索框带有搜索提示点击消失代码实例

搜索框带有搜索提示点击消失代码实例:

搜索框大家一定都不陌生,因为随时都可以用到,比较人性化的搜索框都有这样的效果,默认情况有搜索提示,点击搜索框,提示内容消失,下面就通过代码实例介绍一下如何实现此功能。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function(){
  var keyword=document.getElementById("keyword");
  keyword.onfocus=function(){
    if(this.value=="请输入关键词"){
      this.value="";
    }
  }
  keyword.onblur=function(){
    if(this.value==""){
      this.value="请输入关键词";
    }
  }
}
</script>
</head>  

<body>
<input type="text" value="请输入关键词" id="keyword"/>
<input type="button" value="点击提交" id="tijiao"/>
</body>
</html>

以上代码实现了我们的要求,点击文本框可以删除提示内容,代码比较简单这里就不多介绍了。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4142.html

最原始地址是:http://www.softwhy.com/

时间: 2024-10-25 05:15:05

搜索框带有搜索提示点击消失代码实例的相关文章

314 Ajax案例:邮箱地址验证,搜索框输入自动提示,省市区三级联动

Aja案例接口文档 测试地址:http://localhost:3000 请求参数类型:application/x-www-form-urlencoded 邮箱地址验证 简要描述 验证邮箱@itcast.cn地址是否唯一,已注册 [[email protected]符合规则,未注册itheima] 请求地址 /verifyEmailAdress 请求方式 GET 参数 参数名 必选 类型 说明 email 是 string 待验证邮箱地址 返回值 {message: '邮箱地址已经注册过了, 请

搜索框与搜索按钮并排——无缝对接

1.效果图 难点在于搜索框与搜索按钮要无缝对接 2.实现 (1)搜索框的高度(height+上下border)==搜索按钮的高度 (2)搜索框的字体大小.样式==搜索按钮中的字体大小.样式 (3)搜索框和搜索按钮都要去掉边框:outline:none;当然 搜索按钮需要再加上一个border:none; 3.代码 html代码: <div class="search"> <input type="text" id="in" va

判断复选框中是否有被选中的代码实例

判断复选框中是否有被选中的代码实例:复选框中一般多项,有时候我们需要判断这些付选中是否有被选中的项,下面就通过一个实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <t

搜索框下面显示提示数据(数据是ajax读取)

1.前台页面 1 <div style="margin: 0 auto"> 2 <input type="text" id="wenxiantxt" onkeyup="ClickEvent()" style="width: 250px; height: 25px" /> 3 <ul id="all" style="width:250px;heigh

win10 搜索框输入没提示

1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可 原文地址:https://www.cnblogs.com/xy-ouyang/p/11108128.html

java_前端_autocomplete_搜索框自动匹配提示

效果图: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> title </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=

站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码.只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中.提升用户在网站中的搜索体验. 根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择: 简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中.将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框 HTML代码: <form action=”http://www.baidu.com/baidu” target=”

Ternary Search Tree 应用--搜索框智能提示

前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的,总体思路如下(其中很多可以根据自己的需要修改,我只是写出我的做法): 比如搜索歌曲时智能提示: 建立Ternary Search Tree 将所有歌曲名的字符串放置在一个map中,key为歌曲名.value存储歌曲信息,可以是一个类对象domain,在这里可以按照key值将相同歌曲的播放次数累加,并

一个搜索框的背后

要想做好一个让用户喜欢的搜索功能太难了. 首先,不说界面兼容问题,假设在IE6+.FF.Chrome.Safari.Opera等浏览器下显示正常,不出现错位,字体和搜索框距离大小不一等问题. 您所使用的或者开发的搜索功能包含以下几点呢? 1)进入首页,光标默认在搜索框内.光标离开搜索框,搜索框内显示“请输入关键词”等. 2)当不输入任何关键词,点击搜索仍然会停留在当前页.这里不建议弹出对话框的方式提示用户“请输入关键字”等字样. 3)输入关键词,出现关键词模糊匹配提示下拉框,其中模糊匹配包括英文