<!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. 利用sql语句建立全国省市区三级数据库

    一.创建数据库zone CREATE DATABASE IF ONT EXISTS zone; 二.建立省级表并增加数据 DROP TABLE IF EXISTS `provinces`; CREAT ...

  2. Informatica ODBC的使用

    1.在服务器端配置odbc.ini 注意:添加环境变量才能生效 2.测试连通性 3.使用

  3. openGL常用对象的创建及使用

    一.GPU英文全称Graphic Processing Unit,中文翻译为“图形处理器”.GPU(显卡核心芯片)是显示卡的“大脑”,它决定了该显卡的档次和大部分性能 二.使用背景 随着OpenGL状 ...

  4. （转）nginx+redis实现接入层高性能缓存技术

    转自:https://blog.csdn.net/phil_code/article/details/79154271 1. OpenRestyOpenResty是一个基于 Nginx与 Lua的高性 ...

  5. 6.dockerfile

    一.概述 自制镜像的目的不是为了解决配置更新的问题,而是为了定制化应用服务. 镜像的制作:基于容器制作:dockerfile dockerfile的格式:注释信息+指令(约定俗成使用大写)及其参数 d ...

  6. easyui加载json菜单的相关代码

    /** * 取菜单数据 */ $(function getmenujson() { $.ajax({ type: "GET", cache: false, url: "/ ...

  7. Flask中的中间件

    flask也有和Django类似的中间件,不同的是使用三个装饰器来实现的. .berore_request在请求进入视图之前 @app.before_request def be1 bef be2 b ...

  8. [洛谷 P1013] NOIP1998 提高组 进制位

    问题描述 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母代表数字. 例如: L K V E L L K V E K K V E KL V V E KL KK E E K ...

  9. idhttp.get返回403错误解决办法

    在GET之前,先指定UserAgent参数IdHTTP1.Request.UserAgent := 'Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; Ma ...

  10. win7下redis开机自启动设置

    win7下安装完redis之后,每次开机都得用cmd命令行启动redis,所以就想办法实现开机自启动redis. 一.把启动命令写入bat: E:\redis\redis-server.exe E:\ ...