1.首先创建工具类(已经存在就不用创建了)Util.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"})});
}
});
}
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)
这样就可以了。
分享到:
相关推荐
jquery实现input搜索输入关键词后自动筛选相关信息效果
jQuery表单input字段提示信息动画特效
这是一款jQuery实现的网站搜索框经常用到的文本框input输入关键词后自动补全筛选相关信息的js代码。
jQuery实例-信息提示jQuery实现 jQuery实例-信息提示jQuery实现
jquery_input提示框 里面含一个html和一个js文件,用于实现input 文本框获取焦点后弹出对应的选择提示框
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法。分享给大家供大家参考,具体如下: $(function(){ $(.grayTips).each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$...
jquery表单input输入框动画提示效果代码
jquery实现鼠标移动出现提示信息
主要介绍了使用jQuery实现input数值增量和减量的方法,实例分析了Bootstrap TouchSpin插件的用法,是非常实用的技巧,需要的朋友可以参考下
jQuery实现input数字加减代码是一款基于bootstrap制作input框按钮控制数值增加减少,支持整数,浮点数,输入框尺寸。
使用jQuery实现的效果,主要是调用js实现一些特效,有兴趣可以学习。。
主要介绍了jQuery实现input[type=file]多图预览上传删除等功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
jquery实现input数字加减表格表单代码下载
前端使用JQUERY实现批注功能
jquery输入框提示插件input输入框文字下拉提示添加标签代码
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
如何实现input输入框实时输入触发事件,下面有个不不错的示例使用jquery实现的,感兴趣的朋友可以参考下
【jquery插件】jquery.maskedinput-1.2.2.js