<!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. python_操作linux上的mysql

    在编写初期,遇见一个问题,发现怎么连接不上mysql,一直报错1045: 最后发现,只要下面的,连接写正确,不会出现这个问题, 只要你保证你的user.pwd是正确的, import pymysqld ...

  2. win7安装镜像注入USB3.0,NVMe驱动

    现在的新款主板和笔记本因为原生自带了USB3.0和NVMe,在安装WIN7的时候会出现进入安装界面后不识别USB设备且在硬盘列表中无法读取M.2类型的固态硬盘信息.导致这个现象的原因就是在WIN7安装 ...

  3. .NET core Quartz 定时任务框架 demo

    开始先建个空的web项目. 创建一个新类 QuartzFactory 狠狠的复制就完事了. public class QuartzFactory : IJobFactory { private rea ...

  4. ASP.NET Nlog上手练习小例子

    添加NuGet程序包-             Nlog             Nlog.Web.AspNetCore 两个包. public void Configure(IApplication ...

  5. C++ STL vector类型

    vector容器是一个模板类,可以存放任何类型的对象(但必须是同一类对象).vector对象可以在运行时高效地添加元素,并且vector中元素是连续存储的.注:vector容器内存放的所有对象都是经过 ...

  6. Java中强大的format

    Java中强大的format Java中允许我们对指定的对象进行某种格式化,从而得到我们想要的格式化样式. Format 首先介绍java.text包中的Format Foramt是一个抽象基类,其具 ...

  7. git拉取单个子目录

    初始化一个目录cron(需要拉取的的是code下的cron目录) git init cron 进入目录cd cron/ git remote add -f code ssh://git@192.168 ...

  8. Dockerfile 基本命令

    1. 前言 Dockerfile 是用来构建自定义 Docker 镜像的文本文档.我们通过docker build 命令用于从Dockerfile 文件构建镜像.如果你要构建自定义镜像,Dockerf ...

  9. python错误日志记录工具，解决项目排错问题

    我们写项目的时候难免会遇到代码报错的问题,遇到这样的问题了如何快速的定位问题并解决问题呢? 我今天来整理了利用python只带的工具来解决这个问题,我能需要使用的库有: logging os 这些都是 ...

  10. 如何使用Prometheus采集SAP ABAP Netweaver的应用日志数据

    Prometheus是一套开源的系统监控报警框架.它启发于Google的borgmon 监控系统,由工作在 SoundCloud 的 google 前员工在 2012 年创建,作为社区开源项目进行开发 ...