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

  • 相关阅读:
    Navicat工具破解
    ios7开发者必知
    浏览器工作原理
    Lettcode_104_Maximum Depth of Binary Tree
    LeetCode:Balanced Binary Tree
    error: openssl/md5.h: No such file or directory
    欢迎来到Swift天地(Welcome to Swift)
    最大子阵列和
    【Cocos2d-x Lua】数据库封装类型的操作
    python于lxml应用
  • 原文地址:https://www.cnblogs.com/taoze/p/2625148.html
Copyright © 2011-2022 走看看