input输入框获得、失去焦点添加事件
onBlur:当输入框失去焦点后
onFocus:当输入框获得焦点后
这两个JavaScript事件是写在html标签中的例如：
<input type="text" onBlur=" " onFocus=" " />
使用jQuery的实现方法为：
对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。
focus()：得到焦点时使用，blur()：失去焦点时使用。
代码如下:
同样可以使用jQuery中提供的:focus伪类来判定元素是否获取焦点；
// Get the focused element:
var $focused = $(':focus'); // No jQuery:
var focused = document.activeElement; // Does the element have focus:
var hasFocus = $('input').is(':focus'); // No jQuery:
elem === elem.ownerDocument.activeElement;
下面写一个实例：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<style>
.bor{
border:3px solid red;
}
</style>
<BODY>
<input type="text"/>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).addClass("bor");
});
$("input").blur(function(){
$(this).removeClass("bor");
});
});
</script>
</BODY>
</HTML>
当然还可以根据获取元素的状态修改其他元素的各项属性，或者是需要发生的事件
input输入框获得、失去焦点添加事件的更多相关文章
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...
- input输入框，回车激活按钮事件代码
<input type="text" name="输入框ID" id="输入框ID" onkeypress="if(even ...
- input 输入框默认获得焦点
JavaScript实现默认焦点: 如下写<body>标签: <body onload="window.formLogin.user.focus()"> & ...
- input输入框focus获得焦点边缘发亮
从某个插件上摘下来的代码 <html> <head> <title> New Document </title> <style> texta ...
- input输入框失去焦点，软键盘关闭后，滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...
- input输入框的的input事件和change事件以及change和blur事件的区别
input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...
- input输入框的input事件和change事件
input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...
随机推荐
- SQLHelper--java类
package richard; import java.beans.Statement; import java.sql.Connection; import java.sql.DriverMana ...
- Ubuntu系统下的多路径软件 DM Multipath 配置。
Ubuntu系统下的多路径软件是操作系统自带的 DM Multipath工具.------------------------------------------------------------- ...
- 重写prototype原型后哪些东西改变了
参考<JavaScript高级教程>实例看: 1.重写原型对象后,首先原型对象的constructor属性值(constructor的指向)会发生改变. function Person() ...
- Reference Counting GC (Part one)
目录 引用计数法 计数器值的增减 new_obj()和update_ptr()函数 new_obj()生成对象 update_ptr()更新指针ptr,对计数器进行增减 优点 可即可回收垃圾 最大暂停 ...
- 洛谷——P1518 两只塔姆沃斯牛 The Tamworth Two
https://www.luogu.org/problem/show?pid=1518 题目背景 题目描述 两只牛逃跑到了森林里.农夫John开始用他的专家技术追捕这两头牛.你的任务是模拟他们的行为( ...
- VIjos——V 1782 借教室 | | 洛谷——P1083 借教室
https://vijos.org/p/1782|| https://www.luogu.org/problem/show?pid=1083 描述 在大学期间,经常需要租借教室.大到院系举办活动,小到 ...
- 11.2.0.1升级到11.2.0.4报错之中的一个：UtilSession failed: Patch 9413827
UtilSession failed: Patch 9413827 requires component(s) that are not installed in OracleHome. These ...
- You have ettempted to queue to many files.You may select one files.
<script type="text/javascript" src="/script/swfupload/swfupload.js"></s ...
- 在 Android 应用程序中使用 SQLite 数据库以及怎么用
part one : android SQLite 简单介绍 SQLite 介绍 SQLite 一个非常流行的嵌入式数据库.它支持 SQL 语言,而且仅仅利用非常少的内存就有非常好的性能.此外它还是开 ...
- 关于vuex的项目中数据流动方式
vue的核心是数据驱动,所有数据变更的时机很重要,也就是watch的内容,一般是数据逻辑的操作.在使用vuex的项目中,我们在vuex中只是发请求.拿数据,在视图中来进行逻辑的操作.数据的更新. 1. ...