<!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. TypeScript扩展类方法

    以数组删除元素为例 javascript数组删除一般是这样 const idx = selectedIDs.findIndex(x => x === deSelected); selectedI ...

  2. ps:图层知识

    如果我们要改变下左图上方的蓝色小球位置,就需要先创建一个符合小球大小的选区,这并不困难,可以使用椭圆选框工具来创建一个正圆的选区(可通过[空格 CTRL 单击图像]放大图像).之后使用移动工具移动选区 ...

  3. stream benchmark 交叉编译 on psoc

    之前有研究过这个,居然忘记了,看来确实是老了,没有盘过来. 如何下载,见 linux下载网页上的文件夹以及删除文件(stream) 出现了好几个问题 1. error while loading sh ...

  4. 占卜DIY

    题目地址 Code #include<iostream> #include<vector> #include<map> using namespace std; s ...

  5. django之创建项目

    1.创建虚拟环境 mkvirtualenv django_study -p python3 创建成功后:(django_study) python@ubuntu:~$ 2.安装django-指定版本1 ...

  6. Spark在MaxCompute的运行方式

    一.Spark系统概述 左侧是原生Spark的架构图,右边Spark on MaxCompute运行在阿里云自研的Cupid的平台之上,该平台可以原生支持开源社区Yarn所支持的计算框架,如Spark ...

  7. 移动端调试 — 安卓机+chrome

    移动端开发时,我们常使用chrome自带的模拟器,模拟各种手机设备. 但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢? 下面介绍一种针对Android机的调试方法 1. 在pc和a ...

  8. MySQL - 修改数据库文件物理路径

    一共两步: 修改my.ini文件的datadir: 将修改前datadir路径下的文件复制到修改后的datadir路径. 注意: my.ini可能有多个,windows 系统可以在 MySQL 服务的 ...

  9. 128、TensorFlow元数据MetaData

    #tf.Session.run也接收一个可选的参数options #能够让你来配置训练时的参数 #run_metadata参数让你能够收集关于训练的元信息 #列如你可以使用这些可选项来追踪执行的信息 ...

  10. ModuleNotFoundError: No module named 'mysql'

    问题:使用sqlalchemy初始化数据库报错,如图: 解决办法: pip install mysql-connector 安装后即可正常运行了 参照: https://blog.csdn.net/j ...