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文本框获取焦点和失去焦点判断的更多相关文章
- jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语. <html> <head> <meta h ...
- jquery注冊文本框获取焦点清空,失去焦点赋值
在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...
- 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)
input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...
- (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题
完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...
- input文本框设置和移除默认值
input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...
- HTML input文本框设置和移除默认值
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...
- 我的插件のinput文本框实现宽度自适应
先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...
- js中input文本框设置和移除默认值
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...
- input文本框的value属性在页面中不随输入的数据而变化
今天,在做试验遇到这么一个需求: 一个input文本框,输入值后将标签传到后台,在后台解析标签,发现value仍然是初值,不是我们改变后的值. 例如: <input name="&qu ...
随机推荐
- UserManageSys
JSP部分: err.jsp <%@ page language="java" import="java.util.*" pageEncoding=&qu ...
- Java基础知识强化66:基本类型包装类之JDK5新特性自动装箱和拆箱
1. JDK1.5以后,简化了定义方式. (1)Integer x = new Integer(4):可以直接写成如下: Integer x = 4 ://自动装箱,通过valu ...
- 判断Http请求由手机端发起,还是有电脑端发起
某些情形,我们需要判断Http请求是来自手机端还是电脑端,关键是取得User-Agent的信息,进行筛选判断即可. 核心类如下: public static boolean isMobileDevic ...
- HQL查询
HQL ,Hibernate Query Language ,是Hibernate查询语言,不直接操作数据表,而是操作实体类,根据实体类和对应数据表中的映射关系,查找数据. 下面是hql的基本步骤: ...
- bootstrap table使用小记
bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...
- 如何在sqlserver建立新用户并关联相应的数据库
我们经常需要在数据库上建立有权限的用户,该用户只能去操作某个特定的数据库(比如该用户只能去读,去写等等),那么我们应该怎么在sqlserver上设置呢?下面的步骤有点长,只要一步一步跟着设置就行 方法 ...
- traditional:true
- eclipse安装ADT插件重启后不显示Android SDK Manager和Android Virtual Device Manager图标的一种解决办法
通常安装,搭建安卓环境后,不显示Android SDK Manager和Android Virtual Device Manager ize解决方法:Eclipse ->window->c ...
- Java protobuf框架使用向导
ProtoBuf,全称是Protocol Buffers, 它是谷歌内部用的一种高效的.可扩展的对结构化数据进行编码的格式规范.谷歌自己内部很多程序之间的通信协议都用了ProtoBuf. 下面介绍的是 ...
- WinFrm访问MVC数据
WinFrm使用HttpWebRequest访问MVC中的Controller,以注册为例,客户端输入注册码后点击注册. WinFrm注册代码:代码中使用的是Post提交,UTF8编码方式. priv ...