表单事件,主要是对表单元素获得焦点、失去焦点和内容改变时做出反应。
本文目录:
- 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>
效果演示:
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>
效果演示: