JavaScript + jQuery + HTML 实现<input>提示信息的显示、隐藏，功能与jQuery EasyUI的easyui-textbox的prompt属性相同。

最新推荐文章于 2026-05-05 05:44:06 发布

原创最新推荐文章于 2026-05-05 05:44:06 发布 · 9.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #jquery #html #input #提示信息

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用JavaScript和jQuery结合HTML实现输入框的提示信息显示与隐藏功能。通过简单的示例代码展示了如何在输入框聚焦和失焦时添加或移除提示文字，并提供了完整的HTML和JavaScript代码。

JavaScript + jQuery + HTML 实现<input>提示信息的显示、隐藏，功能与jQuery EasyUI的easyui-textbox的prompt属性相同。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
	// 搜索按钮，页面跳转
	function relocationWin() {
		var queryParam = $("#queryParam").val();
		if (queryParam == "请输入姓名" || queryParam == "") {
			alert("请输入姓名！");
			return;
		}
		alert("success : " + queryParam);
	}
	// 移除提示信息
	function removePrompt() {
		if ($("#queryParam").val() == '请输入姓名') {
			$("#queryParam").val("");
		}
	}
	// 添加提示信息
	function addPrompt() {
		if ($("#queryParam").val() == '') {
			$("#queryParam").val('请输入姓名');
		}
	}
</script>
</head>

<body>
	<div>
		<input id="queryParam" type="text" value="请输入姓名" onfocus="removePrompt()" onblur="addPrompt()" />
		<button type="button" onClick="relocationWin()">Click Me!</button>
	</div>
</body>
</html>

PS ：
1、此方法不局限<input>，但是onfocus 事件、onblur 事件不是所有HTML、JavaScript都支持的，详细的支持请查看：
http://www.w3school.com.cn/jsref/event_onblur.asp
http://www.w3school.com.cn/jsref/event_onfocus.asp
2、测试地址
http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide