<!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. CentOS7安装mysql8.0编译报错集合

    以下都是我安装mysql8.0遇到的一些报错和解决方法 1.does not appear to contain CMakeLists.txt. 原因:mysql下载的源码包不对 解决方法:下载正确的 ...

  2. home home clock

    博客园添加home home clock 将下面代码复制进博客侧边栏广告即可 <div id="myTime"> <object classid="cl ...

  3. [CH5E02] A Little Shop of Flowers

    问题描述 You want to arrange the window of your flower shop in a most pleasant way. You have F bunches o ...

  4. PHP中什么是数组

    PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型. 此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实现),字典,集 ...

  5. POJ 1502 MPI MaeIstrom ( 裸最短路 || atoi系统函数 )

    题意 : 给出 N 个点,各个点之间的路径长度用给出的下三角矩阵表示,上上角矩阵和下三角矩阵是一样的,主对角线的元素都是 0 代表自己到达自己不用花费,现在问你从 1 到 N 的最短路,矩阵的 x 代 ...

  6. 【2019 Multi-University Training Contest 5】

    01: 02:https://www.cnblogs.com/myx12345/p/11649221.html 03: 04:https://www.cnblogs.com/myx12345/p/11 ...

  7. 谈谈vue双向数据绑定问题

    vue是MVVM模型,vueObserver 数据监听器,把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.define ...

  8. cordova+vue做的app解决引入cordova-plugin-splashscreen后启动先显示黑屏在显示启动页

    先上项目目录结构cordova项目结构 android platform 结构 图中用红框框起来的为主要修改文件 这篇主要的讲cordova项目引用了cordova-plugin-splashscre ...

  9. 第九届ECNU Coder K.计软联谊

    题目链接:http://acm.ecnu.edu.cn/contest/16/problem/K/ 题目: K. 计软联谊 Time limit per test: 7.0 seconds Time ...

  10. 连接超时(connect timed out)和读取超时(Read timed out)

    设置连接超时和读取超时方法: RequestConfig config=RequestConfig.custom() .setConnectTimeout(10000) // 设置连接超时时间 10秒 ...