jQuery 表单事件之focus()和blur()事件

focus()事件

定义和用法

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

当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。

blur()事件


定义和用法

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

blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。

提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。

下面我们来看一个实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    请输入:<input type="text">

    <script>
        $('input').focus(function(){
            $('input').css('background',"red");
        })

        $('input').blur(function(){
            $('input').css('background',"green");
        })
    </script>
</body>
</html>

当点击文本框时,文本框获得焦点,背景颜色变为红色

当点击文本框以外的位置,文本框此时失去焦点,变为绿色

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> 请输入:<input type="text"> <script> $('input').focus(function(){ $('input').css('background',"red"); }) $('input').blur(function(){ $('input').css('background',"green"); }) </script> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

JQuery 基础入门教程

  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

一辆想出轨的无轨电车

blur这个事件之前想到了效果,但是就是不知道是什么,现在知道了

8年前    添加回复 0

Alway.以为

每个事件都有不同的效果

8年前    添加回复 0

学习ing

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

8年前    添加回复 0

末日的春天

focus与blur事件:不支持冒泡

8年前    添加回复 0

橱窗的光

事件有点多,记不住了

8年前    添加回复 0

blur和focusou的区别呢?

[最新 数据分析师 的回答] blur和focusou的区别呢?-PHP中文网问答-blur和focusou的区别呢?-PHP中文网问答围观一下哦,学习一下。

时间:8年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~