JavaScript onblur与onfocus事件详解

        html页面中,诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。

一. onfocus(获得焦点事件)

当一个文本框获得焦点时,它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用onfocus来实现。

以下的文本框,当鼠标指针移过去时,里面的文字全部被选中:

请输入网址

这是怎么做的呢?看以下代码及解释:

<input type="text"name="url" value="http://www.gxblk.com" size="30"οnmοusemοve="this.focus();this.select();">

代码里,input标签内嵌入了onmousemove(鼠标指针经过)事件的JS语句,其等号后面的this.focus()意为其自身获得焦点;获得焦点的标志是该文本框内将出现输入光标,但要让其内的文字全部被选中,我们还得用上this.select()语句,它的意思就是选中全部文本框里的文字。

二. onblur(失去焦点事件)

我们经常会检测文本框是否已经被正确输入,检测工作通常在用户点击了提交按钮之后进行,事实上,利用控件失去焦点的时候,我们就可以实时进行这个检测工作,这样的话,onblur事件就派上用场了。

以下例子有四个文本框,如果还没有任何单击它们当中的任意一个的操作,那么什么事情也不会发生,但是,当你单击了其中的任何一个使其拥有了焦点(输入光标在里面),如果什么都没有输入并且单击了别的地方令其失去焦点,就会弹出一个警告,试试看

姓名

性别

年龄

住址

以下是代码和解释:

表单代码

<form name="blur_test">

   <p>姓名 <input type="text" name="name"value="" size="30"οnblur="chkvalue(this)"><br>

    性别 <inputtype="text" name="sex" value=""size="30" οnblur="chkvalue(this)"><br>

    年龄 <inputtype="text" name="age" value=""size="30" οnblur="chkvalue(this)"><br>

    住址 <inputtype="text" name="addr" value=""size="30" οnblur="chkvalue(this)"></p>

</form>

JS代码

<scriptlanguage="javascript">
function chkvalue(txt) {
   if(txt.value=="") alert("文本框里必须填写内容!");

}
</script>

        表单代码里,每一个方框框的代码都嵌入一个onblur JS语句,它们都调用后面的JS代码中的自定义函数chkvalue(this),意思是,当文本框失去焦点时就调用chkvalue()函数;这chkvalue()函数检测文本框是否为空,如果是就弹出警告窗口。该函数有一个参数(txt),对应于前面文本框调用该函数的参数(this)即自身。

到此这篇关于JavaScript onblur与onfocus事件详解的文章就介绍到这了,更多相关js onblur与onfocus事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-11

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

onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件. 可以编如下例子 1.html <HTML> <HEAD> <TITLE>使用onBlur事件处理程序</TITLE> </HEAD> <BODY BGCOLOR="lavender"> <FORM name="F1"> <INPUT TYPE=text NAME=text1 v

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

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

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

ASP.NET使用ajax实现分页局部刷新页面功能

listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) <asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled"> <

妙用Ajax技术实现局部刷新商品数量和总价实例代码

1. 问题的分析 先看一下页面中的情况: 功能如上,在没有Ajax之前,一般都是根据用户修改的值去找Action,然后返回新的jsp页面重新加载整个页面,完成数字的更新.但是有了Ajax技术后,我们可以利用Ajax技术局部刷新要改变的地方,而不是重新加载整个页面.首先看一下上图对应的jsp部分的代码: <div class="section_container"> <!-- 购物车 --> <div id="shopping_cart"

JQuery的Ajax请求实现局部刷新的简单实例

请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改

Springmvc加ajax实现上传文件并页面局部刷新

1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将数据放到fm对象当中. 在默认情况下,contentType = "application/x-www-form-urlencoded".此内容编码类型满足大多数情况. 但是上传文件时,我们对form的属性进行如下设置:contentType = multipart/form-data.在

利用ajax实现简单的注册验证局部刷新实例

1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml 2,(包含了7种技术:javascript xml xstl dom xhtml css xmlhttpRequest) 3,是一种与服务器语言无关的技术,可以用在(php/jsp/asp.net) 4,ajax的工作原理: 创建一个ajax引擎->发送数据给服务器-->通过回调函数接收数据--->将数据赋给指定的页面 下面是注册验证案例register.php是注册页面

Ajax实现带有验证码的局部刷新登录界面

现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录.用ajax登录的好处最明显就是速度快,URL地址没有变化.所有现在登录功能很少再用form表单post提交了,大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面.理论还是要拿来实践才能验证的,下面直接上代码. 运行界面: 1.验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验证码的功能. html部分: <p><label class="lbrigh

jQuery ajaxSubmit 实现ajax提交表单局部刷新

AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

jsp实现局部刷新页面、异步加载页面的方法

局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 <div id=courseList></div> 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为courseList的dom标签重新赋值为需要的页面,就能达到局部刷新的目的 $('#courseList').html(msg); 例如: $.ajax({ dataType:"text", url:basePath+'/courseList', data

JQuery 又谈ajax局部刷新

JQuery 再谈ajax局部刷新. 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击退出弹出提示信息,然后确定后再次刷新用户名,回到了第一幅图片的位置 那这些简单的操作,都需要做一些什么工作呢? 1. 加载登录/(用户名-退出)的页面 2. 点击登录连接,打开登录对话框 3. 登录form表单提交时,对信息进行验证. 4. 验证通过后,关闭对话框,同时刷新1中的页面,显示"用户名-