写在前面
这个功能类似于HTML标签的placeholder属性。不同之处在于,placeholder只有在标签获得焦点并输入非空字段时,它的文字才会消失,而此功能只要标签获得焦点就会显示,而一旦失去焦点就会消失。
核心代码
$(document).ready(
function () {
$("#search").focus(function () {
$(this).val(this.title);
}).blur(function () {
$(this).val("");
});
$("#search").blur();
}
);
要点在于$(this)和this的用法。
全文代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../lib/jquery/jquery.js"></script>
</head>
<body>
<input type="search" id="search" title="searchsomething">
<input type="search" id="search2" title="searchsomething" placeholder="something">
<script>
$(document).ready(
function () {
$("#search").focus(function () {
$(this).val(this.title);
}).blur(function () {
$(this).val("");
});
$("#search").blur();
}
);
</script>
</body>
</html>