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

<style>
.textarea{border:1px solid #bbb; 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>
 1 (function($){
 2 $.fn.textRemindAuto = function(options){
 3   var options = options || {};
 4   var defaults = {
 5     blurColor : '#999',
 6     focusColor : '#333',
 7     auto : true,
 8     chgClass :''
 9   };
10   var settings = $.extend(defaults,options);
11   if( settings.auto ){
12     var v = $.trim($(this).val());
13     if( v ){
14     $(this).each(function(i){
15     $(this).focus(function(){
16     if( $.trim($(this).val()) === v ){
17     $(this).val('');
18   };
19   $(this).css('color',settings.focusColor);
20   if( settings.chgClass ){
21     $(this).toggleClass('border');
22   }
23   }).blur(function(){
24     if( $.trim($(this).val()) === '' ){
25     $(this).val(v);
26   };
27   $(this).css('color',settings.blurColor);
28     if( settings.chgClass ){
29       $(this).toggleClass('border');
30     };
31   });
32  });
33 };
34 }
35 }
36 })(jQuery)
37 
38 //调用方式
39 $('.remindAuto').textRemindAuto();
40 $('.borderChange').textRemindAuto({chgClass:'border'})
41 $('#textColorChg').textRemindAuto({focusColor:'red'})

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

原文地址:https://www.cnblogs.com/taoze/p/2625148.html