<!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. FORMAT 的用法

    https://www.cnblogs.com/gaodu2003/archive/2008/12/22/1359927.html Format 格式指令具有以下的形式:"%" [ ...

  2. C++ 的多继承与虚继承

    C++之多继承与虚继承   1. 多继承 1.1 多继承概念 一个类有多个直接基类的继承关系称为多继承 多继承声明语法 class 派生类名 : 访问控制 基类名1, 访问控制 基类名2, ... { ...

  3. gin-swagger生成API文档

    github地址:https://github.com/swaggo/gin-swagger 下载安装cmd/swag命令工具包 先下载cmd包,才能执行相关命令 go get -u github.c ...

  4. C# 调用 C++ dll的两种方式

    目录: 1.非托管方式 2.托管方式 3.介绍 extern "C" 4.介绍   DllImport 1.非托管方式 第一种,非托管方式:调用类和方法https://www.co ...

  5. ssm(spring+springmvc+mybatis)整合之环境配置

    1-1.导包 导入SpringMVC.Spring.MyBatis.mybatis-spring.mysql.druid.json.上传和下载.验证的包 1-2.创建并配置web.xml文件 配置sp ...

  6. Java之路---Day02

    2019-10-17-20:21:22 顺序结构: 概述:顺序执行,根据编写的顺序,从上到下执行语句 判断语句1-if: if语句第一种格式: if(关系表达式){ 语句体; } 执行流程: 1.首先 ...

  7. java中异常的抛出:throw throws

    java中异常的抛出:throw throws Java中的异常抛出 语法: public class ExceptionTest{ public void 方法名(参数列表) throws 异常列表 ...

  8. jQuery实现图片上传

    $('input[type="file"]').change(function(event) { var currentTarget = event.currentTarget; ...

  9. SQL常见的一些面试题(太有用啦)

    SQL常见面试题 1.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name   kecheng   fenshu张三    语文       81张三     数学       75李四 ...

  10. nginx使用过程中遇到的问题及基本使用总结

    问题: 1.出现这个问题nginx: [error] open() "/run/nginx.pid" failed (2: No such file or directory) 解 ...