onBlur事件与onfocus事件（js）（光标到达和离开是触发事件）

àì夳堔傛蜴生んèń 2022-06-12 09:23 947阅读 0赞

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

可以编如下例子

1.html

<HTML>  
<HEAD>  
<TITLE>使用onBlur事件处理程序</TITLE>  
</HEAD>  
<BODY BGCOLOR="lavender">  
<FORM name="F1">  
<INPUT TYPE=text NAME=text1 value="1111ONBLUR\_green" ONBLUR="(document.bgColor='green')">  
<INPUT TYPE=text NAME=text2 value="2222ONBLUR\_black" ONBLUR="(document.bgColor='black')">  
<INPUT TYPE=text NAME=text2 value="3333ONBLUR\_yellow" ONBLUR="(document.bgColor='yellow')">  
<br>  
<p>  
<INPUT TYPE=text NAME=text3 value="4444onfocus\_blue" οnfοcus="(document.bgColor='blue')">  
<INPUT TYPE=text NAME=text4 value="5555onfocus\_red" οnfοcus="(document.bgColor='red')">  
<INPUT TYPE=text NAME=text4 value="6666onfocus\_orange" οnfοcus="(document.bgColor='orange')">  
</FORM>  
</BODY>  
</HTML>

还有以下例子

2.html

3   
04   
05 <html>  
06 <head>  
07 <title>OnFocus事件</title>  
08 </head>  
09 <body>  
10 <Form>

11 <input type="text" name="test1" value="test1" οnclick=alert("可以关掉!")>  
11 <input type="text" name="test1" value="test1" οnblur=alert("可以关掉aaaaaaa!")>

11 <input type="text" name="test1" value="test1" οnclick=alert("可以关掉bbbbbbbbb!")>  
12 <input type="text" name="test2" value="一按我就无法关掉了，haha" onFocus=alert("我成为了输入焦点!")>  
13 </Form>  
14 </body>  
15 </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，947人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery（绑定事件/ 解除事件/触发事件/事件对象）

绑定事件 1.简单事件绑定： $(selector) .click(handler) 2.bind方式绑定： 1. bind(“c...

曾经终败给现在/ 2024年04月19日 09:41/ 0 赞/ 68 阅读

相关事件绑定(onclick,onfocus,onblur)

事件绑定(onclick,onfocus,onblur) 学习路线：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语

╰半夏微凉°/ 2024年03月31日 13:23/ 0 赞/ 65 阅读

相关 JS Onblur 与Onclick事件冲突的解决办法

场景：百度的搜索框输入检索字后下拉会有对应的列表出来，要求点击搜索框外的区域下拉列表消失，点击下拉列表的某个记录后跳转。实现方式为 input 的onchange+onbl

清疚/ 2024年02月18日 17:26/ 0 赞/ 8 阅读

相关 js 手动触发input事件

let evt = document.createEvent('HTMLEvents') evt.initEvent('input', true, true)

ゝ一纸荒年。/ 2023年01月19日 11:47/ 0 赞/ 2 阅读

相关离开页面时触发的事件

beforeunload事件当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

左手的ㄟ右手/ 2022年12月17日 12:55/ 0 赞/ 141 阅读

相关 html 页面失去焦点事件,详解HTML onfocus获得焦点和onblur失去焦点事件

HTML onfocus 事件属性定义和用法 onfocus 属性在元素获得焦点时触发。 onfocus 常用于、以及 . 提示：onfocus 属性与 onbl

偏执的太偏执、/ 2022年10月06日 07:57/ 0 赞/ 270 阅读

相关 JS触发按键事件

<script type="text/javascript" language=JavaScript charset="UTF-8"> document.onkeydo

电玩女神/ 2022年08月18日 10:56/ 0 赞/ 310 阅读

相关 onBlur事件与onfocus事件（js）（光标到达和离开是触发事件）

onFocus事件就是当光标落在文本框中时发生的事件。 onBlur事件是光标失去焦点时发生的事件。可以编如下例子 1.html <HTML> <HEAD>

àì夳堔傛蜴生んèń/ 2022年06月12日 09:23/ 0 赞/ 948 阅读

相关 onfocus获取焦点事件与onblur失去焦点事件

<input type="text" value="请输入您的称呼" "if (value =='请输入您的称呼'){value =''}" "if (value ==

蔚落/ 2022年04月24日 07:26/ 0 赞/ 459 阅读

相关 js手动触发事件dispatchEvent()

如果大家将一张网页看成一个form的话，大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的，只要发送一条消息即可达成。(Pos

我不是女神ヾ/ 2022年03月22日 15:56/ 0 赞/ 915 阅读