详说jQuery的focus()、blur()事件

  • what

  focus():当元素获得焦点时,发生 focus 事件。

  blur():当元素失去焦点时发生 blur 事件。

  • 小例子
  HTML文件  Enter your name: <input type="text" />
javascript文件:
$(document).ready(function(){
      $("input").focus(function(){
        $("input").css("background-color","#ff0"); //黄色
      });
      $("input").blur(function(){
        $("input").css("background-color","#0f0"); //绿色
      });
    });

  浏览器打开:

  1.刷新页面,输入框为白色背景

  

  2.准备键入,输入框获得焦点,输入框背景变为黄色

  

  3.输入结束,失去焦点,输入框背景变为绿色

  

时间: 2024-11-05 17:31:33

详说jQuery的focus()、blur()事件的相关文章

bobojQuery focus和blur事件的应用详解

一.需求原因在填写表单时需要实现如下效果二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/htm

jquery文本框的focus和blur事件

jquery文本框的focus和blur事件 focus事件在元素获取焦点时触发,如点击文本框时,触发该事件:而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件 代码如下 <body> <h3>表单中文本框的focus和blur事件</h3> <input id="txtest" type="text" value="" /> <div></div>

说说focus /focusin /focusout /blur 事件

事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusout:和blur一样,只是此事件支持冒泡: 以前一直以为所有事件都是支持冒泡的,都是可以cancel的,查阅了[MDN上相关资料](https://developer.mozilla.org/en-US/docs/Web/Events)后,才发现有些事件支持冒泡,有些事件并不支持冒泡:有些事件有默认行

jquery 触发/失去焦点事件例子详解

触发焦点: $("Element").focus() 触发每一个匹配元素获得焦点事件. $("Element").focus(function) 事件会在获得焦点的时候触发,既可以是鼠标行为,也可以是按tab键导航触发的行为,并且绑定一个处理方法. 失去焦点: $("Element").blur() 触发每一个匹配元素失去焦点事件. $("Element").blur(function) 事件会在元素失去焦点的时候触发,既可以

focus、blur事件的事件委托处理(兼容各个流浏览器)

今天工作中遇到个问题,问题是这样的,一个form表单中有比较多的input标签,因为form中的input标签中的值都需要前端做客户端校验,由于本人比较懒而且特不喜欢用循环给 每个input元素添加blur事件处理,感觉这样有损专业前端形象!想过用事件委托,然而focus.blur事件利用冒泡机制搞事件委托行不通啊,父级元素不支持focus.blur咋办???? 由此引发了对此问题的思考,人生就是这样,总觉得自己NB的不行,感觉自己什么都会,然而你在没遇到boss的时候打着小怪一直都会觉得自己天

jquery点击click事件和blur事件冲突如何解决

最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件和查询提示结果click事件发生冲突,点击查询结果时,会首先触发input的blur事件,导致将查询提示结果隐藏选择不了, 解决办法: 给blur失去焦点事件添加延迟事件,让blur事件在click事件后执行. $(".query_tools").blur(function(event){

jQuery源码解读-事件分析

最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventListener(event, function, useCapture) event:事件名,例如“click”,这里要提醒的一点是不要加前缀“on”;    function:事件触发时执行的函数;    userCapture:默认为false,表示event事件在冒泡阶段触发.如果设置为true,则

div无法触发blur事件解决的方法

默认情况下div无法获取焦点,无法触发focus与blur事件,推測span,a等标签也无法触发焦点事件(input:button.及button标签能够触发) 怎样使div触发blur事件:能够给div加上tabindex属性 在线演示:http://sandbox.runjs.cn/show/e0bvfcag 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

JQuery Checkbox的change事件

JQuery   Checkbox的change事件 参考 http://blog.csdn.net/hbhgjiangkun/article/details/8126981 $(function(){    $("#ischange").change(function() {        alert("checked");    });}); 上面的代码没作用修改为下面即可$(function(){ if ($.browser.msie) {  $('input