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`中的提示文字随鼠标焦点移进移出而显示或隐藏的功能。 首先，我们需要在HTML中设置表单的基本结构。通常，每个`input`元素会有一个默认的`value`属性，这个属性的...
/** * 给引用页面动态添加验证事件 * 案例： 及格分数</label> <input type=... * msginfo(objid,objmess) 校验非空信息提示 #B0B0B0 灰色色值 * errinfo(objid,objmess) 校验格式错误信息提示 RED 红色色值 */
4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...
在本文中，我们将深入探讨如何使用jQuery库来实现一些常见的前端交互效果，包括斑马线效果、打字效果、元素的隐藏与显示以及登录界面的创建。jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理、...
此外，一些表单验证库如jQuery Validation或Formik也能帮助我们更好地处理用户输入和提示信息的交互。 总结，H5输入框的提示信息是提升用户体验的重要手段，通过`placeholder`属性可以轻松设置，结合CSS和...
$.prompt('这是一个基本的提示信息', { buttons: { Ok: true, Cancel: false }, callback: function(v,m,f) { if (v) { // 用户点击“Ok”，执行相应操作 } else { // 用户点击“Cancel”，执行相应操作 } }...
3. JavaScript（可能包括jQuery）用于交互式提示信息的实现。 4. 前端框架（如React或Vue）中与提示信息相关的组件开发。 5. 使用开发工具（如IDE或编辑器的插件）提升开发效率。 如果你对以上任何一点感兴趣，可以...
在网页设计和开发中，创建具有默认灰色文本的文本框是一种常见的需求，这通常用于提供提示信息或预填充用户可能需要输入的数据。标题和描述提到的"文本框默认值灰色方法"涉及到使用JavaScript库jQuery来实现这一效果...
Placeholder属性是HTML5中input元素新增的一个属性，用于定义表单输入字段的提示信息（即在输入框中显示灰色文字作为提示，当用户开始输入时消失）。由于IE早期版本不支持placeholder属性，所以需要使用jQuery来实现...
这个压缩包提供了一种jQuery实现的特效，使得输入框的标签在用户聚焦或输入时能够动态地浮现在输入框内，从而引导用户清晰地了解应填写的信息，增强了表单的易用性和视觉吸引力。 首先，我们需要理解jQuery库。...
错误提示信息的样式使用`#erroruname`和`#errorpass`来指定，当表单验证不通过时，这些元素会显示错误提示。 ### 总结 通过本篇教程，我们可以了解到使用HTML创建表单界面、利用CSS进行样式设计，以及运用jQuery...
Placeholder属性是HTML5的一部分，允许开发者在表单的input元素上显示灰色的提示信息，当用户开始输入时，提示信息会自动消失。然而，并非所有的浏览器都支持这一属性，特别是旧版本的浏览器。 本文将详细解释如何...
对于那些不支持`placeholder`属性的浏览器，你可能需要使用JavaScript或者jQuery插件来实现类似的功能。 此外，随着浏览器对CSS新特性的支持越来越好，可以使用更通用的`::placeholder`伪元素选择器来统一处理`...
在页面加载时，`input`元素中往往会有一个默认值，这个值可能是灰色的，表示这是一个提示信息。当用户点击这个`input`框，焦点获取到该元素时，我们希望这个默认值变为另一种颜色，比如黑色，以提示用户可以在这里...
在网页设计中，为了提升用户体验，常常需要对输入框（Input Field）进行一些特殊处理，例如当用户没有输入任何内容或者仅输入了空格时，自动显示提示信息。这种功能可以引导用户理解输入框的用途，提高交互性。在...
1. 默认展示：输入框初始状态边框颜色为灰色，中间显示输入提示信息。 2. 获取焦点：当输入框获得焦点时，边框变为蓝色，并根据输入内容是否为空显示相应的提示信息。 3. 失去焦点：用户输入内容正确时，边框变为浅...
这个属性允许开发者为输入框(input)设置一个提示信息，通常以灰色文本的形式显示在输入框内，当用户点击输入框或输入内容时，提示信息会自动消失。然而，对于早期版本的Internet Explorer（IE），尤其是IE9及以下...
在实现过程中，可能还会涉及到其他细节，如确保表单提交前输入的验证码是正确的，以及在验证码输入完毕后，提示信息消失等。这些都需要通过JavaScript的DOM操作和事件处理来完成。 在微信开发中，这种方法尤其实用...