老生常谈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 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
jQuery 表格工具集
Apr 25 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
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
php自定义分页类完整实例
2015/12/25 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
深入理解python中的select模块
2017/04/23 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
浅谈Python __init__.py的作用
2020/10/28 Python
利用python绘制正态分布曲线
2021/01/04 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
一岗双责责任书
2014/04/15 职场文书
校长个人总结
2015/03/03 职场文书
在职证明格式样本
2015/06/15 职场文书
大学生支教感言
2015/08/01 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
python画条形图的具体代码
2022/04/20 Python