`
摩羯-008
  • 浏览: 4268 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js中的onblur和onfocus事件

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

一. onfocus(获得焦点事件)

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

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

请输入网址

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

<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="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"onblur="chkvalue(this)"><br>

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

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

    住址 <inputtype="text" name="addr" value=""size="30" onblur="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源代码】JavaScript onblur与onfocus事件详解.docx

    JavaScript中的onfocus和onblur事件是网页交互中的两个重要事件,它们主要应用于HTML表单元素,如文本框、按钮等,用于追踪用户对这些元素的焦点状态。在本文中,我们将详细探讨这两个事件的原理和应用场景。 一、...

    JS:onfocus和onblur 事件应用举例

    其中,`onfocus`和`onblur`事件作为DOM(文档对象模型)的一部分,被广泛应用于网页开发中,用于响应用户的焦点变化。这两个事件主要用于输入框(`&lt;input&gt;`元素)、文本区域(`&lt;textarea&gt;`元素)等可聚焦元素。 ###...

    JavaScript的onfocus与onblur用法

    JavaScript是Web开发中不可或缺的一部分,尤其在处理用户交互时,事件监听器如`onfocus`和`onblur`起着至关重要的作用。这两个事件主要应用于表单元素,但也可以用于任何可聚焦的HTML元素,例如按钮、链接或文本...

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

    JavaScript中的`onfocus`和`onblur`事件是网页交互中的关键部分,它们主要用于处理用户与HTML表单元素之间的交互,如按钮、文本框等。这两个事件与元素的焦点状态紧密相关。 一、`onfocus`事件 `onfocus`事件在用户...

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

    在实际应用中,onFocus和onBlur事件常常被用于表单验证。例如,一个需要用户填写电子邮件地址的输入框,当用户聚焦到该输入框时,可以使用onFocus事件来检测用户是否输入了正确的邮箱格式;当用户完成填写并离开该...

    form表单中的onblur事件

    在网页开发中,表单(Form)是用户与页面交互的重要元素,用于收集用户输入的信息。在HTML中,我们可以利用各种事件来控制表单元素...结合其他事件和JavaScript功能,我们可以构建出更加智能和用户友好的Web应用程序。

    详解HTML onfocus获得焦点和onblur失去焦点事件

    HTML中的`onfocus`和`onblur`是两个非常重要的事件处理属性,它们主要用于处理用户交互,特别是与表单元素的交互。这两个事件是表单验证和动态界面更新的基石。 `onfocus`事件是在一个元素(通常是可聚焦的元素如`...

    js和html部分代码集.doc

    2. JavaScript事件处理:JavaScript事件处理包括onBlur、onFocus、onchange、onselect等,用于响应用户交互。 3. JavaScript DOM操作:JavaScript可以通过DOM(Document Object Model)来访问和操作HTML文档的元素。...

    OnFocus与OnBlur的例子区别

    总结来说,`OnFocus` 和 `OnBlur` 是JavaScript中处理用户交互的关键事件。`OnFocus` 通常用于初始化用户输入,而 `OnBlur` 则用于在用户完成输入后进行验证或清理工作。结合使用这两个事件,可以创建更加动态且具有...

    JavaScript程序设计——事件处理实验报告.docx

    - **表单事件**:如`onsubmit`(表单提交)、`onfocus`(元素获得焦点)、`onblur`(元素失去焦点)、`onchange`(元素值改变)。 3. **干预系统的事件处理机制**: - **停止事件冒泡**:通过`event....

    javaScript常用事件命令

    下面将对 JavaScript 常用事件命令进行总结和讲解。 onblur 事件 onblur 事件是在表单元素中,当元素失去焦点时执行的事件。例如,在输入框中输入用户名时,当焦点离开输入框时,onblur 事件将被触发。 onchange ...

    html的DOM中Event对象onblur事件用法实例

    在JavaScript中,`onblur`事件还可以与其他DOM事件(如`onclick`、`onfocus`等)结合使用,以实现更复杂的交互逻辑。例如,当一个元素获得焦点后,可以使用`onfocus`事件来改变其样式,而当它失去焦点时,通过`...

    JavaScript表单相关事件.pdf

    本篇文章主要探讨了JavaScript中的两个关键表单事件:获得焦点事件(onfocus)和失去焦点事件(onblur),以及一个关联的失去焦点内容改变事件(onchange)。 1. 获得焦点与失去焦点事件 `onfocus`事件在用户将...

    javaScript事件课堂笔记+作业.pdf

    在早期的JavaScript中,事件处理通常通过在HTML元素中添加`onxxx`属性来完成,如`onclick="js代码"`。现在更推荐使用DOM(文档对象模型)级别的事件处理,例如使用`addEventListener`和`removeEventListener`方法来...

    JavaScript触发事件列表

    下面是JavaScript触发事件列表,涵盖了常见的事件类型和应用场景: 单击事件(OnClick) 单击事件是用户单击鼠标按键时产生的事件,同时onclick指定的事件处理程序或代码将被调用执行。例如:打开页面" onclick=...

    JavaScript中常见的一些事件

    JavaScript是Web开发中不可或缺的一部分,尤其在处理用户交互方面,...此外,随着Web技术的不断演进,一些新的事件和API(如Intersection Observer、Pointer Events等)也应纳入学习范畴,以适应现代Web开发的需求。

    [js]javascript事件集合(包有触发事件)终版.pdf

    JavaScript事件是编程中的一种重要机制,它允许程序对用户的交互做出响应。JavaScript是基于对象的语言,事件驱动是其核心特性之一。当用户通过鼠标、键盘或其他输入设备进行操作时,这些动作被称为事件,而与事件...

Global site tag (gtag.js) - Google Analytics