<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>
<script type="text/javascript"
src="./js/jquery.js"></script>
<script type="text/javascript">
function inputTipText(){
$("input[class*=grayTips]") //所有样式名中含有grayTips的input
.each(function(){
var oldVal=$(this).val(); //默认的提示性文本
$(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"})})
})
}
$(function(){
inputTipText(); //直接调用就OK了
})
</script>
</head>
<body>
<input type="text" value="输入您的用户名" class="grayTips" />
<input type="text" value="输入您的登录密码" class="aaagrayTips"/>
</body>
</html>二、input标签获取焦点是文本框内提示信息清空
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript" type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function checkText(){
var textId = document.getElementById('test');
//设置文本框中的字体颜色为灰色
document.getElementById('test').style.color='#C0C0C0';
var textDefault = '中文';
function cls(){
if (this.value == textDefault){
this.value = '';
}
}
function res(){
if (this.value == ''){
this.value = textDefault;
}
}
textId.onfocus = cls;
textId.onblur = res;
}
addLoadEvent (checkText);
</script>
<body>
<input type="text" id="test" value="中文" />
</body>
</html>
分享到：
相关推荐
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法。分享给大家供大家参考，具体如下： $(function(){ $(.grayTips).each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$...
2. **默认灰色文本**：默认灰色文本是指文本框内显示的非选中状态的颜色较淡的文字，用于提示用户该字段的用途。在用户开始输入时，这些灰色文本应自动消失。 3. **实现方法**：在jQuery中，我们可以使用`.val()`...
本篇将详细讲解如何使用jQuery来实现在表单`input`中的提示文字随鼠标焦点移进移出而显示或隐藏的功能。 首先，我们需要在HTML中设置表单的基本结构。通常，每个`input`元素会有一个默认的`value`属性，这个属性的...
在网页设计中，为了增强用户体验，常常会在输入框（文本框）中添加“水印”效果，即在用户未输入任何内容时显示提示性文字，一旦用户开始输入或聚焦到输入框，这些提示文字就会消失。JQuery是一个流行的JavaScript库...
这个属性允许开发者为输入框(input)设置一个提示信息，通常以灰色文本的形式显示在输入框内，当用户点击输入框或输入内容时，提示信息会自动消失。然而，对于早期版本的Internet Explorer（IE），尤其是IE9及以下...
在本文中，我们将探讨如何使用CSS和JavaScript（特别是jQuery库）来实现文本框input的聚焦与失焦样式的改变。 首先，我们可以使用CSS的伪类选择器`:focus`来定义元素在获得焦点时的样式。以下是一个例子： ```css ...
HTML5提供了多种表单元素，如`<input>`（文本框、密码框、复选框、单选按钮等）、`<textarea>`（多行文本输入）、`<select>`（下拉菜单）和`<button>`（提交按钮）等。这些元素可以通过属性`disabled`来控制其启用或...
在IT领域，编辑框是用户界面中非常常见的一种元素，用于接收用户输入文本。无论是网页、桌面应用还是移动应用，我们都能找到它们的身影。编辑框的外观，包括背景颜色和字体样式，对于用户体验有着重要影响。本文将...
在网页设计中，有时我们需要对用户交互元素，如`input`、`select`和`textarea`，进行定制化的样式调整，以提供更好的用户体验。本文将详细介绍如何通过JavaScript（JS）来改变这些元素的默认字体颜色，并展示一些...
当`readonly`属性设置为`true`时，用户无法在输入框内修改文本，但可以选中和复制。在HTML中，我们创建了一个名为`deptname`的文本输入框，并将其初始设置为灰色背景和只读状态： ```html <input name="deptname...
当我们将`attr`方法与`disabled`属性结合使用时，可以轻松地启用或禁用表单元素，如文本框、文本区域和按钮等。这在某些场景下非常有用，比如在处理表单验证或数据提交过程中，我们可能希望临时禁用某些元素，防止...
-修正灰色皮肤的CSS问题。 -修正Grid的列名中不能包含中文字符的BUG(feedback:davidwen)。 -为Web.config和PageManager增加属性AjaxTimeout(单位秒，默认30秒)。 -修正了在Grid的PageIndexChange事件中不能获取...
ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...