AI工具推荐 视频效率加速

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这个事件之前想到了效果,但是就是不知道是什么,现在知道了

9年前      0

Alway.以为

每个事件都有不同的效果

9年前      0

学习ing

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

9年前      0

末日的春天

focus与blur事件:不支持冒泡

9年前      0

橱窗的光

事件有点多,记不住了

9年前      0

blur和focusou的区别呢?

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

时间:9年前

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