输入框显示输入提示，点击消失

最新推荐文章于 2023-12-07 14:42:07 发布

君醉酒

最新推荐文章于 2023-12-07 14:42:07 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp JQuery

本文链接：https://blog.youkuaiyun.com/rain097790/article/details/39583811

JQuery 同时被 2 个专栏收录

9 篇文章

订阅专栏

jsp

2 篇文章

订阅专栏

本文介绍了一种实现输入框显示输入提示、点击消失，并在用户提交时验证输入是否为空的技术，包括输入框聚焦与失焦时的样式变化。

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

/**
 * 输入框显示输入提示，点击消失。没输入直接提交，提交的输入框内容为空，不提交显示的提示文字 
 *
 * inputId：输入框id，submitId：提交按钮id，promptStr：提示文字
 */
function inputPrompt(inputId, submitId, promptStr){
	
	$("#" + submitId).click(function() {
		if($("#" + inputId).val() == promptStr){
			$("#" + inputId).val("");
		}
		$("#" + submitId).submit();
	});
	
	if($("#" + inputId).val() == ""){
		$("#" + inputId).val(promptStr);
	}
	
	if($("#" + inputId).val() != promptStr){
		$("#" + inputId).css("color","black");
	} else {
		$("#" + inputId).css("color","#CCC");
	}
	
	$("#" + inputId).focus(function(){
		if($("#" + inputId).val() == promptStr){
			$("#" + inputId).val("");
			$("#" + inputId).css("color","black");
		}
	});
	
	$("#" + inputId).blur(function(){
		if($("#" + inputId).val() == ""){
			$("#" + inputId).val(promptStr);
			$("#" + inputId).css("color","#CCC");
		}
	});
}