<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--这里注意函数名要首字母大写，小写的话不生效-->

     <div style="width: 60px;margin: 0 auto">

         <input  id="i1" type="text" value="请输入内容" onfocus="Foo();" onblur="Blur();"/>

         <!--目前好多新浏览器支持的格式-->

         <input  id="i2" type="text" placeholder="请输入内容"/>

     </div>

    <script>

        function Foo() {

            var tag = document.getElementById("i1");

            var val = tag.value;

            if(val == "请输入内容"){tag.value=""};

        }

        function Blur() {

            var tag = document.getElementById("i1");

            var val = tag.value;

            if(val.length == 0){tag.value="请输入内容"};

        }

    </script>

</body>

</html>

　　

使用onfocus与onblur实现搜索框附加信息的更多相关文章

  1. 搜索框请输入关键字 onfocus 和 onblur

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Dom实例：数据自增、搜索框及跑马灯

    数据自增 功能:当点击add按扭后,div标签中的数据自动+1,实现网页的动态化 <!DOCTYPE html> <html lang="en"> < ...

  3. 【JavaScript_DOM 百度搜索框】

    今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢? 我们一起来学习吧 这是一个HTML页面: <!DOCTYPE ...

  4. 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

  5. js之搜索框

    目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息. 代码如下: <!DOCTYPE htm ...

  6. Javascript实例 -- 计时器, 搜索框,selected联动

    计时器: <body> <input type="text" id="i1"> <input type="button& ...

  7. 前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

  8. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  9. 模仿51cto搜索框

    做这个demo遇见的问题 1==>input type=submit有默认样式 padding:1px 6px所以将他去除 2==>input submit有默认样式 去除默认边框 bor ...

随机推荐

  1. hdu 4651 Partition(整数拆分+五边形数)

    Partition Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. Wannafly挑战赛27 D绿魔法师

    链接Wannafly挑战赛27 D绿魔法师 一个空的可重集合\(S\),\(n\)次操作,每次操作给出\(x,k,p\),要求支持下列操作: 1.在\(S\)中加入\(x\). 2.求\[\sum_{ ...

  3. NOIP2015 提高组 Day T3 斗地主

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共5张牌来进行的扑克牌游戏.在斗地主中,牌的大小关 系根据牌的数码表示如下:3<4< ...

  4. 20 简述BASE64编码的作用和c#对其的支持？

  5. python中*args和**kwargs学习

    *args 和 **kwargs 经常看到,但是一脸懵逼 ,今天终于有收获了 """ python 函数的入参经常能看到这样一种情况 *args 或者是 **kwargs ...

  6. java连接redis5.0单机版报连接超时错误

    使用java代码测试redis5.0单机版时,报redis连接超时异常,而linux上的redis能正常访问: redis.clients.jedis.exceptions.JedisConnecti ...

  7. OC + RAC(七) RACSubject和RACSignal的区别

    -(void)_test8{ /// RACSubject继承自RACSignal 但是RACSubject和RACSignal的区别? //1能接收1,2 //但是2只能接收2 RACSubject ...

  8. [CSP-S模拟测试]:石头剪刀布（rps）（概率DP）

    题目传送门(内部题9) 输入格式 第一行一个整数$n$.接下来$n$行每行$3$个非负整数$r_i,p_i,s_i$. 输出格式 一行一个实数表示答案.当你的答案与标准答案的绝对或相对误差不超过${1 ...

  9. IP地址的分类及各类IP的最大网络数、网络号范围和最大主机数

    总结自谢希仁老师的<计算机网络>第五版 每一类网络地址都由两部分组成:网络号net-id+主机号host-id.IP地址的分类可以参看下图: 可以看到各个类别的区别,同时,所有的类别都是3 ...

  10. IBatis.Net 下使用SqlBulkCopy 大批量导入数据 问题解决

    SQLBulkCopy是继承SQLClient空间下的一个特殊类,它可以帮助我们以映射的方式把DataTable和DataReader数据大批量导入到数据库对应表中 public void Inert ...