这篇文章我们来了解jQuery获得与失去焦点事件的方法，在网站中如果存在一些让用户填写内容的表单元素，那么我们能通过焦点事件和失去焦点事件，来给用户作出一些提示的内容。那么jQuery是如何实现获得与失去焦点事件的呢？接下来就跟随小编来一起学习一下吧！

    本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery focus()获得焦点事件

    focus()方法：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

    语法：

$(selector).focus()

    复制

    例：input 输入框获得焦点时改变其边框的颜色

    示例代码：

<input type="text" name="" id="mochu">
<script>
    $('#mochu').focus(function(){
        $(this).css('border-color','red');
    });
</script>

    复制

    当鼠标移入input中并点击时，input元素会变成如下的形式

    jq focus()事件，会为input加入一个CSS样式

<input type="text" name="" id="mochu" style="border-color: red;">

    复制

    jquery blur()失去焦点事件

    blur()方法：当元素失去焦点时发生 blur 事件

    语法：

$(selector).blur()

    复制

    例：input失去焦点后，弹出输入框中的内容

    示例代码：

<input type="text" name="" id="mochu">
<script>
    $('#mochu').blur(function(){ 
    alert($(this).val());    
    });
 </script>

    复制

    运行结果如图：

    利用jq blur()失去焦点事件来验证用户输入的内容

    JQuery中的blur()失去焦点事件，我们可以用来检查用户在input输入框中输入的内容是否合法，比如以下代码，如果用户输入的内容少于五个字符就给出提示

    示例代码：

<input type="text" name="" id="mochu">
<script>
    $('#mochu').blur(function(){
        if($(this).val().length < 5){
            alert('字数太少了，多输入几个吧');
        }
    });
</script>

    以上就是jQuery获得与失去焦点事件的方法介绍，上述示例具有一定的参考价值，有需要的朋友可以了解看看，希望对大家学习jQuery的使用有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自PHP中文网

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 基于Vue和ssh如何实现在线聊天，具体过程是什么

  这篇文章主要为大家详细介绍了Vue+ssh框架实现在线聊天，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS中replace函数大小写有分吗？一文看懂replace的使用

  JS中replace函数大小写有分吗？replace()函数表示将用一个字符串替换字符串中的所出现的特定内容。对于replace()方法区不区分大小写问题，有一些新手不是很清楚。对此，本文就给大家来详细的介绍一下replace()的使用。

• python虚拟环境virtualenv是什么，用法是怎样

  python虚拟环境 virtualenv是什么？virtualenv是一个创建隔绝的Python环境的工具。为什么要创建虚拟环境？它解决了“项目X依赖于版本1.x，而项目Y需要项目4.x”的两难问题，

• JS监听事件的常用方法有哪些

  什么是事件监听？事件监听就是计算机对事件进行监听，知道什么时候发生了这个事件，从而执行一些写好的程序。

• JavaScript中的this有何作用，有什么妙用呢

  本文实例讲述了JavaScript中的this妙用。分享给大家供大家参考，具体如下：