首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-08-22 
使用jQuery实现input的灰色提示信息1.首先创建工具类(已经存在就不用创建了)Util.js在里面添加如下方法:?/

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

1.首先创建工具类(已经存在就不用创建了)Util.js

在里面添加如下方法:

?

/** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:&lt;input type=&quot;text&quot; tipMsg=&quot;您的用户名&quot;&nbsp;&nbsp; /&gt; *  * @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"})});}});}
?

?

2.使用方法

在页面(jsp)上使用,要先加载 jQuery和Util工具类

代码如下:

?

<%@ 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="您的用户名"/>

?当然,页面之所以没写 <body> 等基本标签,是由于使用了模版(sitemesh)

?

这样就可以了。

?

?

?

?

?

?

?

?

  多谢

热点排行