获得焦点与失去焦点事件

一介绍

获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。

失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。

一般情况下，这两个事件是同时使用的。

二应用

文本框获得焦点时改变背景颜色

本示例是在用户选择页面中的文本框时，改变文本框的背景颜色，当选择其他文本框时，将失去焦点的文本框背景颜色恢复原始状态。

三代码

<table align="center" width="337" height="204" border="0">
<tr>
<td width="108">用户名:</td>
<td width="213"><form name="form1" method="post" action="">
<input type="text" name="textfield" οnfοcus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>密码:</td>
<td><form name="form2" method="post" action="">
<input type="text" name="textfield2" οnfοcus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><form name="form3" method="post" action="">
<input type="text" name="textfield3" οnfοcus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>性别:</td>
<td><form name="form4" method="post" action="">
<input type="text" name="textfield5" οnfοcus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
<tr>
<td>邮箱:</td>
<td><form name="form5" method="post" action="">
<input type="text" name="textfield4" οnfοcus="txtfocus()" onBlur="txtblur()">
</form></td>
</tr>
</table>
<script language="javascript">
<!--
function txtfocus(event){ //当前元素获得焦点
var e=window.event;
var obj=e.srcElement; //用于获取当前对象的名称
obj.style.background="#FFFF66";
}
function txtblur(event){ //当前元素失去焦点
var e=window.event;
var obj=e.srcElement;
obj.style.background="FFFFFF";
}
//-->
</script>

四运行结果

大小: 2.1 KB

查看图片附件

获得焦点与失去焦点事件相关推荐

php 获得焦点,jquery中blur()失去焦点与focus() 获取焦点事件
以前我们在js中写input各种事件时都会直接在input中写,昨天开始我开始全面使用jquery了,现在来谈一下我对jquery blur() focus()事件的学习笔记. 对于元素的焦点事件,我 ...
input失去焦点和获得焦点jquery焦点事件
input失去焦点和获得焦点jquery焦点事件插件, 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一 ...
获得焦点和失去焦点事件的应用
描述获得焦点和失去焦点事件的应用代码 .info{color:#888888; }.error{color: red; }.right{color: white;background-color: ...
Qt获得焦点和失去焦点处理事件（Focus事件）
Qt获得焦点和失去焦点处理事件 (Focus事件) 方法一: 描述:一开始我要实现的目的就是,在一个窗体上有多个可编辑控件(比如QLineEdit.QTextEdit等),当哪个控件获得焦点,哪个控件 ...
Javascript基础（四）:获得焦点和失去焦点事件
1.获取ID的函数在说获取焦点和失去焦点事件之前,先说说封装获取ID的函数.一般在实际操作中,会经常用到提取某个元素的ID,如果每条都列,想必非常麻烦.一般如果有很多ID需要提取的情况基本都用提取I ...
js离焦事件_jquery 获得焦点和失去焦点事件
前端网站中如果存在一些让用户填写内容的表单元素的话,我们可以使用JQ中获得焦点事件和失去焦点事件,来给用户作出一些提示的内容.今天我们就说一说JQuery下获得焦点和失去焦点的事件的使用方法. jqu ...
JavaScript表单事件获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change
JavaScript表单事件焦点处理焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型.所谓焦点,就是激活表单字段,使其可以响应键盘事件. 获取焦点:focus 当单击或使用Ta ...
WPF Window 窗口获得焦点和失去焦点事件
Window 窗口获得焦点和失去焦点事件(窗口变为背景窗口.窗口切换等都引起窗口焦点失去) Activated获得焦点事件和 Deactivated失去焦点的事件: Activated: 获 ...
html5文本框获取焦点,文本框获得焦点和失去焦点的判断代码
文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后, ...
java文本框获得输入焦点_文本框获得焦点和失去焦点的判断代码
文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后, ...

获得焦点与失去焦点事件

获得焦点与失去焦点事件相关推荐

最新文章

热门文章