<!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. 嵌入式02 STM32 实验05 蜂鸣器

    蜂鸣器:是一种一体化结构的电子讯响器.主要分为分压式蜂鸣器和电磁式蜂鸣器两种类型. 一.有源/无源蜂鸣器(不是指是否带电源,而是有没有自带震荡电路) 1.有源蜂鸣器:有源蜂鸣器自带震荡电路,一通电就会 ...

  2. KNN-k近邻算法

    目录 KNN-k近邻算法 一.KNN基础 二.自己写一个knn函数 三.使用sklearn中的KNN 四.自己写一个面向对象的KNN 五.分割数据集 六.使用sklearn中的鸢尾花数据测试KNN 七 ...

  3. idea远程部署SpringBoot项目到Docker

    安装docker服务或者系统学习docker参考这篇文档:https://shimo.im/docs/fE0eJCx8IIojQXzB/ 1.配置docker的远程端口 vim /usr/lib/sy ...

  4. 【题解】Luogu P5342 [TJOI2019]甲苯先生的线段树

    原题传送门 挺有趣的一道题 \(c=1\),暴力求出点权和n即可 \(c=2\),先像\(c=1\)一样暴力求出点权和n,考虑有多少路径点权和也为n 考虑设x为路径的转折点,\(L\)为\(x\)向左 ...

  5. 运行一个docker镜像并开机启动

    记录,我用的liunx机是centos7.x 安装 安装Docker包$ sudo yum install docker-engine 启动Docker守护进程$ sudo service docke ...

  6. 2、在NET中实现多线程

    1.System.Threading命名空间 System.Threading命名空间提供了使得可以多线程编程的类和接口 其中 (1)Thread类构成了C#多线程编程的支柱,他用于创建并控制线程 ( ...

  7. Angular—入门环境,项目创建,导入项目

    1.安装 nodejs,npm nodejs 下载地址: https://nodejs.org/en/download/

  8. 在.net core中数据操作的两种方式（Db first && Code first）

    在开发过程中我们通常使用的是Db first这种模式,而在.net core 中推荐使用的却是 code first 反正我是很不习惯这种开发模式 于是就搜寻整个微软的官方文档,终于找到了有关.net ...

  9. C# vb .net图像合成-多图片叠加合成

    在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...

  10. Navicat 导出 表结构

    Navicat 导出 表结构 转自:https://www.cnblogs.com/xianxiaobo/p/10254737.html 1. 首先点击新建查询,然后输入下面的语句 SELECT CO ...