<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>事件类型（onfocus和onblur）</title>

    <!--

        onfocus;获得焦点时触发（例如：输入框获得光标时触发

        onblur;失去焦点时触发（例如：输入框失去光标时触发

        常用于表单

     -->

     <style>

         #name,#hint{float: left; margin-top: 20px;}

     </style>

     <script>

         window.onload=function (){

             var use=document.getElementById("name");//获取用户名输入框

             var hin=document.getElementById("hint");//获取提示

             use.onfocus=function (){   //输入框获得光标时触发

                hin.innerHTML="设置后不可更改，不少于4个字符，最多14个字符";

             }

             use.onblur=function (){    //输入框失去光标时触发

                 if (use.value.length<4 || use.value.length>14){    //输入的字符少于4或者大于14时

                     hin.innerHTML='<img src="../img/no.png" />';

                 }else{     //否则

                    hin.innerHTML='<img src="../img/yes.png" />';

                 }

             }

         }

     </script>

</head>

<body>

    <input id="name" type="text" placeholder="请输入用户名" />

    <div id="hint"></div>

</body>

</html>

事件类型（onfocus和onblur）的更多相关文章

  1. [转载]浏览器事件window.onload、onfocus、onblur、ons

    原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...

  2. JS事件 失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

    失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...

  3. onblur事件和onfocus事件失效

    先看onblur事件和onfocus事件的定义: <element onblur="SomeJavaScriptCode"> <element onfocus=& ...

  4. javascript 的 事件类型（事件）

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

  5. JS中的事件类型和事件属性的基础知识

    周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦 ...

  6. 真正让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦

    转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...

  7. MySQL binlog中的事件类型

    MySQL binlog记录的所有操作实际上都有对应的事件类型的,譬如STATEMENT格式中的DML操作对应的是QUERY_EVENT类型,ROW格式下的DML操作对应的是ROWS_EVENT类型. ...

  8. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  9. DOM事件类型详解

    一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...

随机推荐

  1. excel数据分析流程

    1.获取数据 2.去掉空值.空行.重复行 3.去掉无用行,筛选出需要行 4.分组数据 5.数据排序

  2. golang ---JSON-ITERATOR 使用

    jsoniter ( json-iterator )是一款快且灵活的 JSON 解析器 Jsoniter 是最快的 JSON 解析器.它最多能比普通的解析器快 10 倍之多, 独特的 iterator ...

  3. volatile 作用

    volatile使用场景:线程间共享变量需要使用 volatile 关键字标记,确保线程能够读取到更新后的最新变量值. volatile关键字的目的是告诉虚拟机: 1.每次访问变量时,总是获取主内存的 ...

  4. Chrome 谷歌开发者工具使用窍门

    我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的, ...

  5. springcolud 的学习（四）服务治理. Eureka

    什么是服务治理在传统rpc远程调用中,服务与服务依赖关系,管理比较复杂,所以需要使用服务治理,管理服务与服务之间依赖关系,可以实现服务调用.负载均衡.容错等,实现服务发现与注册.服务注册与发现 在服务 ...

  6. Python进阶(十三)----面向对象

    Python进阶(十三)----面向对象 一丶面向过程编程vs函数式编程vs面向对象编程 面向过程: ​ 简而言之,step by step 一步一步完成功能,就是分析出解决问题所需要的步骤,然后用函 ...

  7. Filter DSL 常用语法 -- 基本查询语法，必会

    转发自:https://www.cnblogs.com/ghj1976/p/5293250.html term 过滤 term主要用于精确匹配哪些值,比如数字,日期,布尔值或 not_analyzed ...

  8. springCloud学习5（Spring-Cloud-Stream事件驱动）

    springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 代码见文章结尾   想想平常生活中做饭的场景,在用电饭锅做饭的同时, ...

  9. Django:内置组件Content-Type

    12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...

  10. react学习记录（一）

    一.React是什么 声明式写法(强调结果,命令式编程强调过程) 组件化 一次学习,随处编写(多种应用场景,web程序,原生手机应用,系统应用,命令行工具) 二.为什么学习react 大公司加持-fa ...