表单事件，主要是对表单元素获得焦点、失去焦点和内容改变时做出反应。
本文目录：
- focus()；
- blur()；
- change()。
focus(handler)
元素获得焦点时执行的事件处理函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
blur(handler)
元素失去焦点时执行的事件处理函数。
注意： 失去焦点是指元素在获得焦点之后再失去焦点。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件01_焦点</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text">
<script>
$(function () {
// 获得焦点
$("input:eq(0)").focus(function(){
alert("获得焦点");
});
// 失去焦点
$("input").eq(0).blur(function(){
alert("失去焦点");
});
});
</script>
</body>
</html>
效果演示：
focus()和blur().gif
change(handler)
元素内容改变时执行的事件处理函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
下面的内容中，改变输入框的内容，当按下回车键或输入框失去焦点时，将会弹窗，弹窗的内容为输入的内容。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件11_change()</title>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text">
<script>
$(function () {
// 内容改变
$("input").change(function(){
alert($(this).val());
});
});
</script>
</body>
</html>
效果演示：
change().gif
网友评论