文本框文本域提示自动显示隐藏jQuery小插件

<style>
.textarea{border:1px solid #bbb; width:550px; height:80px;}
.border{border:1px solid #34538b;}
</style>

<h4>最简单的切换</h4>
<p><input class="remindAuto" type="text" size="45" value="请出入姓名" /></p>
<h4>外带class的切换</h4>
<p><textarea class="textarea borderChange">变换边框颜色</textarea></p> 
<h4>改变显示的颜色</h4>
<p><input id="textColorChg" type="text" size="45" value="请输入日期..." /></p>

 

(function($){
$.fn.textRemindAuto = function(options){
　　var options = options || {};
　　var defaults = {
　　　　blurColor : '#999',
　　　　focusColor : '#333',
　　　　auto : true,
　　　　chgClass :''
　　};
　　var settings = $.extend(defaults,options);
　　if( settings.auto ){
　　　　var v = $.trim($(this).val());
　　　　if( v ){
14　　　　 $(this).each(function(i){
　　　　$(this).focus(function(){
　　　　if( $.trim($(this).val()) === v ){
　　　　$(this).val('');
　　};
　　$(this).css('color',settings.focusColor);
　　if( settings.chgClass ){
　　　　$(this).toggleClass('border');
　　}
23　　 }).blur(function(){
　　　　if( $.trim($(this).val()) === '' ){
　　　　$(this).val(v);
　　};
　　$(this).css('color',settings.blurColor);
　　　　if( settings.chgClass ){
　　　　　　$(this).toggleClass('border');
　　　　};
　　});
　});
};
}
}
})(jQuery)

//调用方式
$('.remindAuto').textRemindAuto();
$('.borderChange').textRemindAuto({chgClass:'border'})
$('#textColorChg').textRemindAuto({focusColor:'red'})

猛点Demo：http://220.194.52.12:8088/text-remind-auto-hide-show.html