搜索框带有搜索提示点击消失代码实例-阿里云开发者社区

开发者社区> 青衫无名> 正文

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

简介:
+关注继续查看

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

代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html> 
<html
<head
<meta charset=" utf-8"
<meta name="author" content="http://www.softwhy.com/" /> 
<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>



原文发布时间为:2017-3-11

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
php封装json通信接口详解及实例
php创建JSON数据详解: ``` <?php //创建一个字符数组 $arr=array( 'id'=>1, 'name'=>'david' ); echo json_encode($arr);//这个是创建JSON的关键函数 ?> ...
1626 0
LeetCode 700. 二叉搜索树中的搜索
给定二叉搜索树(BST)的根节点和一个值。
85 0
Bootstrap实例(实习第3天)
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device
960 0
二路归并排序 代码实例
  感觉好久没有写排序程序了,C语言有qsort()函数,C++有sort()函数,java语言有Arrays类(主要这个不是Array)。今天写了一下归并排序还有点费劲呀。晚上回来写写。   归并排序就是采用分治法进行排序:   (1)将一个数组分成小的2个数组分别进行排序;   (2)之后...
860 0
+关注
3598
文章
840
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载