<!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="Focus()" onblur="Blur()">

    </div>

    <script>

        function Focus() {

            tag = document.getElementById('i1');

            val = tag.value;

            if (val == '请输入内容') {

                tag.value = '';

            }

        }

        function Blur() {

            tag = document.getElementById('i1');

            val = tag.value;

            if (val.length==0){

                tag.value = '请输入内容';

            }

        }

    </script>

</body>

</html>

搜索框请输入关键字 onfocus 和 onblur的更多相关文章

  1. 两种方法实现text输入框中“请输入关键字”的提醒

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

  2. Bootstrap3 模态框 select2搜索框无法输入

    <div class="modal fade" role="dialog" aria-hidden="true" data-backd ...

  3. 在BootStrap的modal中使用Select2搜索框无法输入

    用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...

  4. select2的搜索框不能输入搜索内容

    按照select2官网配置完后,搜索框弹出后无法输入内容,究竟怎么回事,于是在其他页面尝试了select2,发现可以啊,为什么在这个地方不可以,终于找到了造成这个问题的不同之处:select2在模态对 ...

  5. 解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  6. Bootstrap 模态框 select2搜索框无法输入

    去掉模态框的div中的 tabindex="-1" 这个属性 <div class="modal fade" role="dialog" ...

  7. vue-搜索功能-实时监听搜索框的输入，N毫秒请求一次数据

    <template> <div class="search-box"> <input class="box" :placehold ...

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

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

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

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

随机推荐

  1. 有效二叉查找树判断（java实现）

    leetcode 原题 :(即判断二叉树是否为二叉查找树) Given a binary tree, determine if it is a valid binary search tree (BS ...

  2. angular的中文文档在这里。。

    链接 仿ant-design的  angular组件 echarts文档

  3. Cause: org.postgresql.util.PSQLException: ERROR: cached plan must not change result type的前因后果

    首先说明一下遇到的问题: PG数据库,对其中的某张表增加一列后,应用报错,信息如下: 应用使用相关框架如下:SpringBoot.MyBatis. ### Cause: org.postgresql. ...

  4. (转)List<T>的各种排序方法

    近日,在工作的时候遇到要对一个大的List<T>集合进行排序,于是就了解下各种List<T>的排序方法. 首先,排序自然就会想到用Sort方法,看看List<T>的 ...

  5. 20155315 2016-2017-2 《Java程序设计》第八周学习总结

    教材学习内容总结 第14章 NIO与NIO2 1.认识NIO NIO使用频道(Channel)来衔接数据节点,在处理数据时,NIO可以让你设定缓冲区(Buffer)容量,在缓冲区中对感兴趣的数据区块进 ...

  6. Oracle 和 mysql 的批量操作Sql语句 的区别

    正确的oracle批量新增的sql是: 方法 1: <insert id="insertAttractionsBatch" parameterType="java. ...

  7. POI使用 (4.0) 常用改动

    POI 升级到高版本后,原有的EXCLE导入导出工具类部分代码已不适用,目前只是对我自己写的工具类的过期代码进行更新,以后继续更新 若有问题请指出,再修改 1.数据类型 Cell.CELL_TYPE_ ...

  8. Oracle序列和伪表

    创建序列 create sequence sq_teacher_tnostart with 10 从哪一个数字开始increment by 1 每次增长的数字maxvalue 999999999999 ...

  9. IDEA java开发学习笔记

    JDK8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 配置环境变量 ...

  10. NTP时间服务器的配置

      1.NTP简介NTP(Network Time Protocol,网络时间协议)是用来使网络中的计算机,时间同步的一种协议.NTP服务器利用NTP协议来提供时间同步服务. 2 .环境准备主机名   ...