老生常谈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 相关文章推荐
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
js获取class的所有元素
2013/03/28 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
python面向对象法实现图书管理系统
2019/04/19 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
婚礼证婚人演讲稿
2014/09/13 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL