<!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. Visual Studio Code (vscode) 配置 C / C++ 环境

    Visual Studio Code (vscode) 配置 C / C++ 环境 昨天突发奇想,想使用vscode配置C++环境,因为不想下载 Dev OR codeblock,然后借助了很多网上教 ...

  2. 什么是PHP？

    PHP起源于1995年,由Rasmus Lerdorf开发.到现在,PHP已经历了21年的时间洗涤,成为全球最受欢迎的脚本开发语言之一.由于PHP 5是一种面向对象.完全跨平台的新型Web开发语言.所 ...

  3. JDK和J2EE有什么关系

    JDK(Java Development Kit)是Java 开发工具J2EE是Java一个平台 Java 平台有三个版本,这使软件开发人员.服务提供商和设备生产商可以针对特定的市场进行开发:* Ja ...

  4. Go ---- defer 和 return 执行的先后顺序

    Go 中 defer 和 return 执行的先后顺序 多个defer的执行顺序为“后进先出”: defer.return.返回值三者的执行逻辑应该是:return最先执行,return负责将结果写入 ...

  5. C#JsonConvert.DeserializeObject反序列化json字符

    需求:需要把第一个id替换掉,在序列化成json dynamic dyn = Newtonsoft.Json.JsonConvert.DeserializeObject(json); foreach ...

  6. linux安装好的mysql rpm -qa |grep mysql不见

    输入: rpm -qa|grep -i mysql

  7. java基础 String

    标准格式:数据类型[] 数组名称 = new 数据类型[] {元素1,元素2,...};省略格式:数据类型[] 数组名称 = {元素1,元素2,...}; Scanner类实现的功能,可以实现键盘输入 ...

  8. 【i.MX6UL/i.MX6ULL开发常见问题】单独编译内核,uboot生成很多文件,具体用哪一个？

    [i.MX6UL/i.MX6ULL开发常见问题]2.3单独编译内核,uboot生成很多文件,具体用哪一个? 答:内核编译出来的文件是~/MYiR-imx-Linux/arch/arm/boot/目录下 ...

  9. 全选全不选案例table表格

    全选全不选案例table表格 案例一纯table表格 <table class="table table-bordered"> <thead class=&quo ...

  10. node.js数据库操作

    node 中使用mysql const http = require('http'); const mysql = require('mysql'); const url = require('url ...