jquery焦点事件有哪些
本教程操作环境:windows7系统、jquery3.6版本、Dell G3电脑。
jquery焦点事件有两个:获取焦点focus()和失去焦点blur()。
jquery focus()获取焦点事件
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
语法
//触发 focus 事件
$(selector).focus()
//将函数绑定到 focus 事件
$(selector).focus(function)
function:可选。规定当发生 focus 事件时运行的函数。
示例:focus() 方法 获得焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script class="lazy" data-src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
</body>
</html>
jquery blur()失去焦点事件
当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。
提示:该方法常与 focus() 方法一起使用。
语法
//为被选元素触发 blur 事件:
$(selector).blur()
//添加函数到 blur 事件:
$(selector).blur(function)
示例:blur() 方法 失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script class="lazy" data-src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").focus(function() {
$("input").css("background-color", "#FFFFCC");
});
$("input").blur(function() {
$("input").css("background-color", "#D6D6FF");
});
});
</script>
</head>
<body>
用户名: <input type="text" />
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
</body>
</html>
利用jq blur()失去焦点事件来验证用户输入的内容
JQuery中的blur()失去焦点事件,我们可以用来检查用户在input输入框中输入的内容是否合法,比如以下代码,如果用户输入的内容少于五个字符就给出提示
示例代码:
<input type="text" name="" id="mochu">
<script>
$('#mochu').blur(function(){
if($(this).val().length < 5){
alert('字数太少了,多输入几个吧');
}
});
</script>
【推荐学习:jQuery视频教程、web前端视频】
以上就是jquery焦点事件有哪些的详细内容,更多请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341