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

最新推荐文章于 2023-07-07 14:05:34 发布

achi010

最新推荐文章于 2023-07-07 14:05:34 发布

阅读量9.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript jquery html input 提示信息

本文链接：https://blog.youkuaiyun.com/achi010/article/details/70666274

前端专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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