<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1.获取焦点的事件
$("#searchBox").focus(function () {
//1.1 判断文本框的内容是否等于提示内容
var content = $(this).val();
//1.2 如果等于 则清空文本框 如果不等于则 保留
if($.trim(content) == "请输入您的内容..."){
$(this).val("");
}
});
//2.失去焦点的事件
$("#searchBox").blur(function () {
//2.1 判断文本框的内容是否为空
var content = $(this).val();
//2.2 如果为空 则设置为提示文字 否则 保留
if($.trim(content) == ""){
$(this).val("请输入您的内容...");
}
});
});
</script>
</head>
<body>
<input type="text" name="" value="请输入您的内容..." id="searchBox">
</body>
</html>