jQuery获得与失去焦点事件的方法是什么？-群英

上一篇：jQuery触发change事件的方法是什么，怎么用？下一篇：jQuery获取ul下li的个数的方法是什么？

这篇文章我们来了解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中文网

标签： jquery焦点事件

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

上一篇：jQuery触发change事件的方法是什么，怎么用？下一篇：jQuery获取ul下li的个数的方法是什么？