text 隐藏区域 文本提示
<script language="javascript" type="text/javascript" src="js/jquery-1.6.1.js"></script>//引入jquery
$(function () { $('#txtKeyWordzl1').textRemindAuto(); });
//======================保存为js文件也可以===================================
//text文本提示 鼠标移到去文字消失 开始
(function ($) {
$.fn.textRemindAuto = function (options) {
options = options || {};
var defaults = {
blurColor: '#999',
focusColor: '#333',
auto: true,
chgClass: ''
};
var settings = $.extend(defaults, options);
$(this).each(function () {
if (defaults.auto) {
$(this).css('color', settings.blurColor);
}
var v = $.trim($(this).val());
if (v) {
$(this).focus(function () {
if ($.trim($(this).val()) === v) {
$(this).val('');
}
$(this).css('color', settings.focusColor);
if (settings.chgClass) {
$(this).toggleClass(settings.chgClass);
}
}).blur(function () {
if ($.trim($(this).val()) === '') {
$(this).val(v);
}
$(this).css('color', settings.blurColor);
if (settings.chgClass) {
$(this).toggleClass(settings.chgClass);
}
});
}
});
};
})(jQuery); //text文本提示 鼠标移到去文字消失 结束
//====================================================
示例代码
CSS代码：
.textarea{border:1px solid #bbb; width:550px; height:80px;} .border{border:1px solid #34538b;}
HTML代码：
<h4>最简单的切换</h4>
<p><input class="remindAuto" type="text" size="45" value="请出入姓名" />
</p> <p><textarea class="textarea remindAuto">内容不少于300字</textarea></p>
<h4>外带class的切换</h4> <p><textarea class="textarea borderChange">变换边框颜色</textarea></p> <h4>改变显示的颜色</h4>
<p><input id="textColorChg" type="text" size="45" value="请输入日期..." /></p>
JS代码：
$(function(){
$(".remindAuto").textRemindAuto();
$(".borderChange").textRemindAuto({chgClass: "border"});
$("#textColorChg").textRemindAuto({
focusColor: "red"
});
});;
如果想更加简单实现猛烈点击此处
