<!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. （谷歌浏览器）前端以FormData类形成表单（含文件），通过ajax提交，PHP后端$_POST数组为空

    [错误信息] PHP获取不到前端发来的POST数据 [前端代码] [HTTP请求] [后端报错]

  2. 远程登录Linux系统(使用xshell)，远程上传加载文件(使用Xftp)

    一.Xshell(远程登录Linux系统) 1.安装xshell 自己百度找安装包 2.连接登录 1.连接前提 需要Linux开启一个sshd的服务,监听22号端口,一般默认是开启的 查看是否开启: ...

  3. ZooKeeper学习笔记（一）——概述

    zookeeper学习笔记(一)--概述 1. 概述 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目.zookeeper从设计模式的角度来理解:是一个基于观察者设计 ...

  4. EF CodeFirst Dome学习

    创建ConsoleDome控制台应用程序 从NuGet包管理器安装EntityFramework 创建DbContextDome类并继承DbContext public class DbContext ...

  5. map小列

    // 有关学生信息的头文件student.h代码如下 #include #include using namespace std; struct Student                    ...

  6. 自学Python编程的第一天----------来自苦逼的转行人

    学习Python的第一天,也是我第一次写博客的一天,不怎么会写博客,也不怎么会Python,也不怎么会写总结.在学Python的第一天发现自己脑子不是很好用,在学习过程中出现很多错误,错误锦集如下,哈 ...

  7. java-java技术链接

    java基础知识总结大全:https://blog.csdn.net/hao19980724/article/details/83792516 Java核心技术梳理-集合:https://mp.wei ...

  8. MySQL Install--编译安装MySQL 5.7

    MySQL 编译相关选项配置和说明 [MySQL安装的根目录] -DCMAKE_INSTALL_PREFIX=/export/servers/mysql/ [MySQL数据库文件存放目录] -DMYS ...

  9. Unicode字符集的由来

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  10. Python_类的继承与方法重写

    1.新建子类时,括号内要传入继承的父类名 2.super()方法:自动寻找当前类的父类,并调用父类的构造函数,初始化属性值 class Cup: #构造函数,初始化属性值 def __init__(s ...