<!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. 一、苹果Assets.car文件解析图片

    一. https://blog.wxhbts.com/assets.html

  2. gay绿论第一章两点注意事项

    1.不可能事件的概率为0,但概率为0的事件不一定是不可能事件,例如从自然数中取一个数结果是1的概率,从极限角度看,分子是1,分母是∞,结果是0,但它显然是有可能发生的,所以不是不可能事件. 2.两事件 ...

  3. dialog写进dll调用

    #ifdef DLG_WINDOW_API #define DLG_WINDOW_EXPORT __declspec(dllexport) #else #define DLG_WINDOW_EXPOR ...

  4. CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器

    CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...

  5. mac os安裝jdk

    下載安裝 打开mac笔记本,输入账号密码登陆后,点击桌面上的terminal终端图标.打开终端,然后在终端中输入命令java.   从下面的图中可以看到,终端会自动给出提示,没有可以使用的java命令 ...

  6. java 关键字volatile

    一.Java内存模型 想要理解volatile为什么能确保可见性,就要先理解Java中的内存模型是什么样的. Java内存模型规定了所有的变量都存储在主内存中.每条线程中还有自己的工作内存,线程的工作 ...

  7. pypi 清华镜像使用帮助

    清华镜像 地址 https://mirrors.tuna.tsinghua.edu.cn/help/pypi/ 临时使用 pip install -i https://pypi.tuna.tsingh ...

  8. 继续写高精！noip2012国王游戏。。。

    国王游戏 题目描述: 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排成一排,国王 ...

  9. 【Go】Go语言的%d,%p,%v等占位符的使用

    golang 的fmt 包实现了格式化I/O函数,类似于C的 printf 和 scanf. # 定义示例类型和变量 type Human struct { Name string } var peo ...

  10. 20180826(04)-Java序列化

    Java序列化 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型 将序列化对象写入文件之后,可 ...