使用jQuery实现input的灰色提示信息

Myth丶恋晨 2022-08-22 14:24 195阅读 0赞

JS代码：

/**
     * Input框里的灰色提示，使用前先引入jquery
     * <br>使用方法：<input type="text" tipMsg="您的用户名"   />
     * 
     * @return
     */
    function inputTipText(){ 
    	$("input[tipMsg]").each(function(){
    		if($(this).val() == ""){
    			var oldVal=$(this).attr("tipMsg");
    		if($(this).val()==""){$(this).attr("value",oldVal).css({"color":"#888"});}
    		$(this)
    		   .css({"color":"#888"})     //灰色
    		   .focus(function(){
    		    if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}
    		   })
    		   .blur(function(){
    		    if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}
    		   })
    		   .keydown(function(){$(this).css({"color":"#000"})});
    		}
    	});
    }

JSP代码：

<%@ include file="/common/taglibs.jsp"%>
    <%@ page pageEncoding="UTF-8" %>
    <head>
    	<title>测试</title>
    	<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-1.3.2.min.js"></script>
    	<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/Util.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			inputTipText();  //初始化Input的灰色提示信息
    		});
    	</script>
    </head>
    
    <input type="text" tipMsg="您的用户名"/>

实际使用效果图：

![Center][]

[Center]: /images/20220722/c1b704362b42466b8003ddeb76cb421f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery validation 提示信息美化

-------------------- jquery validation 提示信息美化 \\\\\\\\\\\\\\\\\\\\\ 示例

╰+哭是因爲堅強的太久メ/ 2023年03月04日 12:25/ 0 赞/ 32 阅读

相关 jquery 信息提示框对话框 div层实现

效果图： ![SouthEast][] 原网页地址：[http://tutorialzine.com/2010/12/better-confirm-box-jquer

亦凉/ 2022年09月20日 08:46/ 0 赞/ 165 阅读

相关使用jQuery实现input的灰色提示信息

JS代码： / Input框里的灰色提示，使用前先引入jquery <br>使用方法：<input type="text" tipMsg="您

Myth丶恋晨/ 2022年08月22日 14:24/ 0 赞/ 196 阅读

相关使用jQuery实现图片内容的放大(提示)

<!-- 所以受到启发，超链接<a>标签本身有一个title属性，可以完成文本提示，但

布满荆棘的人生/ 2022年08月07日 15:58/ 0 赞/ 115 阅读

相关 input和textarea设定提示信息和默认值

1.input: <inputname="textfield"type="text"value="点击添入标题"onfocus="if (value =='点击添入标题')\

小鱼儿/ 2022年08月05日 08:29/ 0 赞/ 96 阅读

相关 jquery实现input password 提示信息兼容ie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

青旅半醒/ 2022年07月21日 05:58/ 0 赞/ 108 阅读

相关 jquery validation验证，错误提示放在input框的右边

.formTitle{ padding-left:38px; padding-right:11px; float:right;

矫情吗；*/ 2022年06月04日 04:27/ 0 赞/ 124 阅读

相关使用 jQuery 的 Autocomplete 插件实现input输入提示功能 input 输入模糊提示demo

如何使用 HTML5 实现文本框输入内容后带有模糊匹配的功能。这其实很简单，而且jQuery也为我们提供了相应的插件 Autocomplete.js。这不是一项新技术，百度一

ゞ浴缸里的玫瑰/ 2022年05月14日 09:38/ 0 赞/ 201 阅读

相关流行的jQuery信息提示插件(jQuery Tooltip Plugin)

流行的jQuery信息提示插件(jQuery Tooltip Plugin) 信息提示虽然是小东西，但是在网站设计中却起到了巨大的作用。如果你网站的信息提示做的好，会给访

末蓝、/ 2022年03月27日 08:57/ 0 赞/ 792 阅读

相关 jquery实现鼠标移动出现提示信息

[jquery][]家的宝宝9个月了，为了让亲朋好友聚聚，提前给孩子弄个1周岁生日。忙到现在，才上来，上网，看看东西。不知道要写点什么？还是老规矩弄点简单实用的吧，

素颜马尾好姑娘i/ 2022年01月13日 16:39/ 0 赞/ 219 阅读