`
摩羯-008
  • 浏览: 3954 次
  • 性别: 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 onblur与onfocus事件详解  html页面中,诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和...

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

    本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。 一. onfocus(获得焦点事件) 当一个文本框获得焦点时,它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用...

    JavaScript的onfocus与onblur用法

    JavaScript的onfocus与onblur用法文章资源下载,供练习使用

    JS:onfocus和onblur 事件应用举例

    JS:onfocus和onblur 事件应用举例

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

    下面小编就为大家带来一篇老生常谈onBlur事件与onfocus事件(js)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    用javascript实现既能禁止页面鼠标右键查看 同时又能查看页面文本框右键菜单

    可以用在文本框中的onmousedown事件中,但推荐用在 onfocus事件中,若使用的onmousedown的话,则按键盘上摸拟右键的按键(在右win键右边)不响应;若用onfocus事件,则能顺利响应。 最后,当该文本框失去焦点时,需...

    OnFocus与OnBlur的例子区别

    onfocus与OnBlur的例子 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    javaScript常用事件

    常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit ...

    详解js的事件处理函数和动态创建html标记方法

    Form事件,由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):常用的为onblur、onfocus、onselect、onsubmit。  c. keybord事件  d.Mouse事件,由鼠标或类似用户动作触发的...

    JavaScript基础教程第8版

    书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...

    JavaScript详解(第2版)

     13.4.2 鼠标事件和图像——翻转   13.4.3 通过鼠标事件创建幻灯片   13.5 处理链接事件   13.6 处理表单事件   13.6.1 按钮   13.6.2 表单和按钮中的this关键字   13.6.3 表单和onClick事件...

    js日历控件 ,javascript日历控件

    这是一个功能强大的js日期控件,引用时加写: onfocus="showCalendar(this);

    JavaScript笔记.doc

    8、单选钮(事件onBlur、onClick、onFocus): 7 9、复选框(onBlur、onClick、onFocus): 7 10、将复选框和单选钮组合起来: 7 11、使用elements[]数组 8 12、选择框(事件:onBluron、onChange、Focus): 9 四、鼠标和...

    在js(jquery)中获得文本框焦点和失去焦点的方法

    介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $("p").blur(); 或$("p").blur(fn)来实现,有需要的朋友可以参考一下

    JavaScript语言参考手册

    另外,本章还包括了关于使用事件和事件句柄的常规信息。 关于事件常规信息 定义事件句柄 Navigator 4.0 中的事件 event onAbort onBlur onChange onClick onDblClick onDragDrop onError onFocus onKeyDown ...

    jQuery事件及绑定.pptx

    JavaScript+jQuery 网页特效设计 ...当文本框(包括和中的文本被选中的时触发) scroll() 当滚动条发生变化时触发 resize() 当调整浏览器窗口大小时触发 2、事件的绑定 bind() 方法:可以向被选元素添加一个或多

    js 浏览器事件介绍

    浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。 先考察如下的代码: 代码如下: //...

Global site tag (gtag.js) - Google Analytics