您的位置:首页 > Web前端 > JQuery

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

2012-08-06 14:49 671 查看
<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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: