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/

  • 相关阅读:
    vim+makefile入门编辑,编译,差错实例
    vim操作备忘录
    vim学习、各类插件配置与安装
    ubuntu命令行下java工程编辑与算法(第四版)环境配置
    【RabbitMQ】命令行使用学习
    【Docker】RabbitMQ使用学习
    Jmeter如何把响应数据的结果保存到本地的一个文件
    Selenium + Python 自动化测试环境搭建
    Jmeter监控服务器-CPU,Memory,Disk,Network性能指标
    Jmeter 聚合报告---测试结果分析
  • 原文地址:https://www.cnblogs.com/zlog/p/5387837.html
Copyright © 2011-2022 走看看