JQuery之focus函数使用介绍
1. 简介
focus()函数是JQuery中用于设置文本框或者文本域获取焦点时触发的事件处理函数。
2. 使用方法
2.1 基本用法
$(selector).focus(function(){
//执行代码
});
其中 selector 表示要设置的文本框或者文本域的选择器，function(){...} 里面的代码是获取焦点时要执行的函数。
2.2 示例
2.2.1 示例1：获取焦点时修改输入框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>focus()函数示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
/* 输入框获取焦点时的样式 */
input:focus {
border-color: green;
box-shadow: 0 0 5px green;
}
</style>
</head>
<body>
<h1>focus()函数示例</h1>
<form>
<label>输入框：</label>
<input type="text">
</form>
<script type="text/javascript">
$("input").focus(function(){
$(this).css("border-color","green");
$(this).css("box-shadow","0 0 5px green");
});
</script>
</body>
</html>
当输入框获取焦点时，将边框颜色修改为绿色，并增加阴影效果。
2.2.2 示例2：在输入框中显示提示信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>focus()函数示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>focus()函数示例</h1>
<form>
<label>输入框：</label>
<input type="text" value="请输入姓名" onfocus="if (value =='请输入姓名'){value =''}" onblur="if (value ==''){value='请输入姓名'}">
</form>
</body>
</html>
当输入框获取焦点时，在输入框中显示提示信息“请输入姓名”。
3. 总结
focus()函数是JQuery中常用的用于文本框或者文本域获取焦点时触发的事件处理函数，可以用于修改样式、显示提示信息等操作。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery之focus函数使用介绍 - Python技术站
微信扫一扫 
支付宝扫一扫 