zoukankan      html  css  js  c++  java
  • jQuery autoResize

    这是一个用jQuery实现的, 自动调整textarea高度, 非常的好!
    但原作者已经把它的相关描述页面移除了, 这里做个备份吧~
    但js路径还在:
    full: http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js
    minified: http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.min.js
    原文路径: http://james.padolsey.com/javascript/jquery-plugin-autoresize/ (现在是404)

    Usage:
    The following options are available:
    onResize - (type: Function) - A callback function fired every time the textarea is resized. Within the function 'this' refers to the textarea being resized.
    animate - (type: Boolean) - If set to false no animation will take place, the height will immediately change when necessary. By default it's set to true.
    animateDuration - (type: Number) - Millisecond duration of animation, by default it's set to 150.
    animateCallback - (type: Function) - A callback function fired every time an animation completes. Note: not the same as the onResize callback.
    extraSpace - (type: Number) - A pixel value to be added to the total necessary height when applied to the textarea. By default it's set to 20. The idea behind this is to reassure users that they have more space to continue writing.
    limit - (type: Number) - Once the textarea reaches this height it will stop expanding. By default it's set to 1000.

    The textarea will expand when required until the limit is reached, at which time it brings back the scrollbar. If you were to then delete all the contents of the textarea it would only return to it's original size (no smaller). Also note that, even if you set 'animate' to true, the animation will only occur if the element is set to display:block; in the CSS.

    $('textarea#comment').autoResize({
        // On resize:
        onResize : function() {
            $(this).css({opacity:0.8});
        },
        // After resize:
        animateCallback : function() {
            $(this).css({opacity:1});
        },
        // Quite slow animation:
        animateDuration : 300,
        // More extra space:
        extraSpace : 40
    });
    
    /*
     * jQuery autoResize (textarea auto-resizer)
     * @copyright James Padolsey http://james.padolsey.com
     * @version 1.04
     */
    
    (function($){
    
    $.fn.autoResize = function(options) {
    
      // Just some abstracted details,
      // to make plugin users happy:
      var settings = $.extend({
        onResize : function(){},
        animate : true,
        animateDuration : 150,
        animateCallback : function(){},
        extraSpace : 20,
        limit: 1000
      }, options);
    
      // Only textarea's auto-resize:
      this.filter('textarea').each(function(){
    
        // Get rid of scrollbars and disable WebKit resizing:
        var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
    
        // Cache original height, for use later:
        origHeight = textarea.height(),
    
        // Need clone of textarea, hidden off screen:
        clone = (function(){
    
          // Properties which may effect space taken up by chracters:
          var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
          propOb = {};
    
          // Create object of styles to apply:
          $.each(props, function(i, prop){
            propOb[prop] = textarea.css(prop);
          });
    
          // Clone the actual textarea removing unique properties
          // and insert before original textarea:
          return textarea.clone().removeAttr('id').removeAttr('name').css({
            position: 'absolute',
            top: 0,
            left: -9999
          }).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
    
        })(),
        lastScrollTop = null,
        updateSize = function() {
    
          // Prepare the clone:
          clone.height(0).val($(this).val()).scrollTop(10000);
    
          // Find the height of text:
          var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
            toChange = $(this).add(clone);
    
          // Don't do anything if scrollTip hasen't changed:
          if (lastScrollTop === scrollTop) { return; }
          lastScrollTop = scrollTop;
    
          // Check for limit:
          if ( scrollTop >= settings.limit ) {
            $(this).css('overflow-y','');
            return;
          }
          // Fire off callback:
          settings.onResize.call(this);
    
          // Either animate or directly apply height:
          settings.animate && textarea.css('display') === 'block' ?
            toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
            : toChange.height(scrollTop);
        };
    
        // Bind namespaced handlers to appropriate events:
        textarea
          .unbind('.dynSiz')
          .bind('keyup.dynSiz', updateSize)
          .bind('keydown.dynSiz', updateSize)
          .bind('change.dynSiz', updateSize);
    
      });
    
      // Chain:
      return this;
    
      };
    
    })(jQuery);
    

    此插件在行数少时, 比如一两行, 回车时, 第一行会有抖动的现象, 下边的有所改善:
    我发现了一个更好的: http://www.jacklmoore.com/autosize/

  • 相关阅读:
    每日算法
    每日算法
    搜索算法入门详解
    NLP
    每日算法
    每日算法
    Elasticsearch地理位置总结
    elasticsearch Geo Bounding Box Query
    elasticsearch Geo Distance Query
    Elasticsearch java API (23)查询 DSL Geo查询
  • 原文地址:https://www.cnblogs.com/zlog/p/5387837.html
Copyright © 2011-2022 走看看