本文通过三个示例展示了如何使用HTML和jQuery实现输入框获得焦点时显示提示信息的效果。探讨了脚本位置对执行的影响，并提供了正常运行及存在问题的代码案例。
例子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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
