jQuery表单事件之focus与blur事件
上一节
下一节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.8jQuery表单事件之focus与blur事件</title>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
$(function(){
//1.focus()方法触发focus事件，当通过鼠标单击选中某个元素或则通过tab键定位到元素时，该元素就会获得焦点
$('input').focus(function(){
$(this).css('background-color','#ccc');
});
//2.blur()方法触发blur事件，当失去焦点时候，触发blur事件
$('input').blur(function(){
$(this).css('background-color','#F9F');
});
});
</script>
</head>
<body>
账号:<input type="text"><br>
密码:<input type="password"><br>
</body>
</html>
默认效果图
文本框获得焦点效果图
文本框失去焦点效果图
