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


Posted in Javascript onJuly 09, 2016

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" onfocus="(document.bgColor='blue')"> 
<INPUT TYPE=text NAME=text4 value="5555onfocus_red" onfocus="(document.bgColor='red')">
<INPUT TYPE=text NAME=text4 value="6666onfocus_orange" onfocus="(document.bgColor='orange')">
</FORM> 
</BODY> 
</HTML>

还有以下例子

2.html

<!-- 文件说明:OnFocus事件 -->
 <!-- ------------------------------ -->
 <html>
 <head>
 <title>OnFocus事件</title>
 </head>
 <body>
 <Form>

 <input type="text" name="test1" value="test1" onclick=alert("可以关掉!")> 
 <input type="text" name="test1" value="test1" onblur=alert("可以关掉aaaaaaa!")>

 <input type="text" name="test1" value="test1" onclick=alert("可以关掉bbbbbbbbb!")> 
 <input type="text" name="test2" value="一按我就无法关掉了,haha" onFocus=alert("我成为了输入焦点!")>
 </Form>
 </body>
 </html>

以上这篇老生常谈onBlur事件与onfocus事件(js)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
vue router 源码概览案例分析
Oct 09 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 #Javascript
深入浅析JavaScript中的Function类型
Jul 09 #Javascript
JavaScript基础重点(必看)
Jul 09 #Javascript
jQuery获取同级元素的简单代码
Jul 09 #Javascript
JS添加删除DIV的简单实例
Jul 08 #Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 #Javascript
简单封装js的dom查询实例代码
Jul 08 #Javascript
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
PHP连接操作access数据库实例
2015/03/30 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Python实现k-means算法
2018/02/23 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python实现汽车管理系统
2018/11/30 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Python是怎样处理json模块的
2020/07/16 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
学校后勤人员职责
2013/12/27 职场文书
大学生秋游活动方案
2014/02/17 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
自主招生学校推荐信
2014/09/26 职场文书
诉讼授权委托书
2014/10/15 职场文书
团干部培训班心得体会
2016/01/06 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python