JavaScriptonblur与onfocus事件详解
html页⾯中，诸如按钮、⽂本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应⿏标或键盘动作时都可激发预设的操作。本⽂以⽂本框获得和失去焦点为例简单讲解onfocus和onblur的应⽤。
⼀. onfocus（获得焦点事件）
当⼀个⽂本框获得焦点时，它⾥⾯的⽂本就像“好123”⽹站上的百度搜索输⼊框那样全部被⾃动选中，这样的操作可以利⽤onfocus来实现。
以下的⽂本框，当⿏标指针移过去时，⾥⾯的⽂字全部被选中：
请输⼊⽹址
这是怎么做的呢？看以下代码及解释：
<input type="text"name="url" value="blk" 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) {
onblur和blur的区别if(txt.value=="") alert("⽂本框⾥必须填写内容!");
}
</script>
表单代码⾥，每⼀个⽅框框的代码都嵌⼊⼀个onblur JS语句，它们都调⽤后⾯的JS代码中的⾃定义函数chkvalue(this)，意思是，当⽂本框失去焦点时就调⽤chkvalue()函数；这chkvalue()函数检测⽂本框是否为空，如果是就弹出警告窗⼝。该函数有⼀个参数（txt），对应于前⾯⽂本框调⽤该函数的参数（this）即⾃⾝。
到此这篇关于JavaScript onblur与onfocus事件详解的⽂章就介绍到这了，更多相关js onblur与onfocus事件内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。