老生常谈onBlur事件与onfocus事件(js)

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

可以编如下例子

1.html

<HTML>
<HEAD>
<TITLE>使用onBlur事件处理程序</TITLE>
</HEAD>
<BODY BGCOLOR="lavender">
<FORM name="F1">
<INPUT TYPE=text NAME=text1 value="1111ONBLUR_green" ONBLUR="(document.bgColor='green')">
<INPUT TYPE=text NAME=text2 value="2222ONBLUR_black" ONBLUR="(document.bgColor='black')">
<INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" ONBLUR="(document.bgColor='yellow')">
<br>
<p>
<INPUT TYPE=text NAME=text3 value="4444onfocus_blue" onfocus="(document.bgColor='blue')">
<INPUT TYPE=text NAME=text4 value="5555onfocus_red" onfocus="(document.bgColor='red')">
<INPUT TYPE=text NAME=text4 value="6666onfocus_orange" onfocus="(document.bgColor='orange')">
</FORM>
</BODY>
</HTML>

还有以下例子

2.html

<!-- 文件说明：OnFocus事件 -->
 <!-- ------------------------------ -->
 <html>
 <head>
 <title>OnFocus事件</title>
 </head>
 <body>
 <Form>

 <input type="text" name="test1" value="test1" onclick=alert("可以关掉!")>
 <input type="text" name="test1" value="test1" onblur=alert("可以关掉aaaaaaa!")>

 <input type="text" name="test1" value="test1" onclick=alert("可以关掉bbbbbbbbb!")>
 <input type="text" name="test2" value="一按我就无法关掉了，haha" onFocus=alert("我成为了输入焦点!")>
 </Form>
 </body>
 </html>

以上这篇老生常谈onBlur事件与onfocus事件(js)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript blur与click冲突解决办法

    解决blur与click冲突 前言: 在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以. click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 <input type="text" i

  • AngularJS Controller作用域

    AngularJS Controller作用域

    $scope代表视图与数据模型的中间桥梁:scope域中的对象都model和view都可以共享,并且数据是双向同步controller的作用域:主要负责controller标签包裹的元素的数据处理,如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用的原则在Jmeter测试框架,avalon的ms-controller同样体现) HTML正文: <!-- 指定应用名及控制器 --> <body ng-app="myAp

  • AngularJS ng-blur 指令详解及简单实例

    AngularJS ng-blur 指令 AngularJS 实例 当输入框失去焦点(onblur)时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </

  • jsp页面显示数据库的数据信息表

    jsp页面显示数据库的数据信息表

    在日常jsp开发中:最基本的一个操作之一是把之前添加到数据库中的信息在jsp页面中显示出来,也就是增删改查中的查找的一部分: 下面是以上部分的开发步骤及分析. 1.在jsp页面: <thead> <tr> <th>用户名称</th> <th>用户性别</th> <th>用户年龄</th> </tr> </thead> <tbody> <% AccountDAO acco

  • java根据数据库表内容生产树结构json数据的方法

    1.利用场景 组织机构树,通常会有组织机构表,其中有code(代码),pcode(上级代码),name(组织名称)等字段 2.构造数据(以下数据并不是组织机构数据,而纯属本人胡编乱造的数据) List<Tree<Test>> trees = new ArrayList<Tree<Test>>(); tests.add(new Test("0", "", "关于本人")); tests.add(new

  • javascript委托(Delegate)blur和focus用法实例分析

    本文实例讲述了javascript委托(Delegate)blur和focus用法.分享给大家供大家参考.具体分析如下: Opera (9.5b) 对于所有的focus和blur事件,不能正确的触发两次: 因此,focus和blur事件的处理函数可以被委派到事件的捕获阶段. 例子1(列表类): 复制代码 代码如下: <ol id="列表">   <li><a href="#">列表项1</a>     <ol&g

  • 完美解决node.js中使用https请求报CERT_UNTRUSTED的问题

    只要调用了没有受信的https就会报错:CERT_UNTRUSTED 简单的解决方法就是设置环境变量回避非授信证书的问题. 只要在请求的代码之前加上如下代码即可: process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; 结束!!! 以上就是小编为大家带来的完美解决node.js中使用https请求报CERT_UNTRUSTED的问题全部内容了,希望大家多多支持我们~

  • js时间控件只显示年月

    js时间控件只显示年月

    话不多说,请看代码: <input id="db"  /> 初始化加载db标签. $(function () { $('#db').datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的事件触发和对象生成有

  • JSP页面跳转方法小结

     实现JSP页面跳转,有如下几种方式: n        使用href超链接标记              (客户端跳转) n        使用JavaScript                             (客户端跳转) n        提交表单                                      (客户端跳转) n        使用response对象                            (客户端跳转) n        使用for

  • jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)

    本文实例讲述了jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验).分享给大家供大家参考,具体如下: 前台显示页面: welcome.jsp <%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transiti

  • Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. onfocus(获得焦点事件) 当一个文本框获得焦点时,它里面的文本就像"好123"网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用onfocus来实现. 以下的文本框,当鼠标指针移过去时,里面的文字全部被选中: 请输入网址 这是怎么做的呢?看以下代码及解释: <inp

  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

  • JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="

  • 详解js中==与===的区别

    为了减少概念混淆,应该把 =称作(得到或者赋值),==称作(相等),===称作(严格相等) 相同点: 它们两个运算符都允许任意类型的的操作数,如果操作数相等,返回true,否则返回false 不同: ==:运算符称作相等,用来检测两个操作数是否相等,这里的相等定义的非常宽松,可以允许进行类型转换 ===:用来检测两个操作数是否严格相等 1.对于string,number等基础类型,==和===是有区别的 不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否

随机推荐