zoukankan      html  css  js  c++  java
  • 文本框文本域提示自动显示隐藏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

  • 相关阅读:
    ACM进阶
    hdu 2018 母牛的故事
    hdu 2084 数塔
    动态规划算法
    hdu 1003 Max sum
    hihocoder 1037 数字三角形
    UDP和TCP的区别(转)
    JS简单的图片左右滚动
    C# MD5加密的方法+一般处理程序使用Session+后台Json序列化
    CSS DIV 独占一行,清除左右两边的浮动
  • 原文地址:https://www.cnblogs.com/taoze/p/2625148.html
Copyright © 2011-2022 走看看