本文提供了三个关于使用jQuery处理HTML页面中输入框焦点事件的例子。通过这些示例，展示了如何在获取焦点时显示提示信息并使其淡出，以及正确放置JavaScript代码块的位置。
例子1、代码可以正常执行：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<script>
$(document).ready(function() {
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
});
</script>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
</body>
</html>
例子2、代码可以正常执行：
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>
例子3、代码中的js不能正常执行
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
</body>
</html>
来源：http://jackroomage.iteye.com/blog/1807442
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
