Question

我在div中的一个textarea有一个最大高度为80的div。我的问题是当textarea中的文本太长时，textarea应该从它的初始高度增长到cb-input div的最大高度到它的初始高度。

public class odd7{
    public static void main(String[] args)
    {
        int i = 1;
        int a;
        int b;
        int sum = 0;
        while(i <= 100)
        {
            a = i % 2;
            b = i % 7;
            if(a==1 && b==0)
            {
                sum = sum + i;
            }
            i = i + 1;
        }
        System.out.println(sum);
    }
}

这些是我的CSS课程。

<div class="cb-input">
  <form class="cb-form" action="">
    <textarea></textarea>
  </form>
</div>

我不知道textare是否因为溢出-y：auto而没有增长，但也许。有什么想法吗？

Answer 1

我创建了一个小提琴，显示了这个jquery插件的示例，https://github.com/ro31337/jquery.ns-autogrow.我修改了你的css，因此隐藏了溢出。如果不这样做，滚动条将闪烁。

这还包括整个jquery plughin javascript。

/*!
  Non-Sucking Autogrow 1.1.6
  license: MIT
  author: Roman Pushkin
  https://github.com/ro31337/jquery.ns-autogrow
*/
(function() {
  var getVerticalScrollbarWidth;

  (function($, window) {
    return $.fn.autogrow = function(options) {
      if (options == null) {
        options = {};
      }
      if (options.horizontal == null) {
        options.horizontal = true;
      }
      if (options.vertical == null) {
        options.vertical = true;
      }
      if (options.debugx == null) {
        options.debugx = -10000;
      }
      if (options.debugy == null) {
        options.debugy = -10000;
      }
      if (options.debugcolor == null) {
        options.debugcolor = 'yellow';
      }
      if (options.flickering == null) {
        options.flickering = true;
      }
      if (options.postGrowCallback == null) {
        options.postGrowCallback = function() {};
      }
      if (options.verticalScrollbarWidth == null) {
        options.verticalScrollbarWidth = getVerticalScrollbarWidth();
      }
      if (options.horizontal === false && options.vertical === false) {
        return;
      }
      return this.filter('textarea').each(function() {
        var $e, $shadow, fontSize, heightPadding, minHeight, minWidth, update;
        $e = $(this);
        if ($e.data('autogrow-enabled')) {
          return;
        }
        $e.data('autogrow-enabled');
        minHeight = $e.height();
        minWidth = $e.width();
        heightPadding = $e.css('lineHeight') * 1 || 0;
        $e.hasVerticalScrollBar = function() {
          return $e[0].clientHeight < $e[0].scrollHeight;
        };
        $shadow = $('<div class="autogrow-shadow"></div>').css({
          position: 'absolute',
          display: 'inline-block',
          'background-color': options.debugcolor,
          top: options.debugy,
          left: options.debugx,
          'max-width': $e.css('max-width'),
          'padding': $e.css('padding'),
          fontSize: $e.css('fontSize'),
          fontFamily: $e.css('fontFamily'),
          fontWeight: $e.css('fontWeight'),
          lineHeight: $e.css('lineHeight'),
          resize: 'none',
          'word-wrap': 'break-word'
        }).appendTo(document.body);
        if (options.horizontal === false) {
          $shadow.css({
            'width': $e.width()
          });
        } else {
          fontSize = $e.css('font-size');
          $shadow.css('padding-right', '+=' + fontSize);
          $shadow.normalPaddingRight = $shadow.css('padding-right');
        }
        update = (function(_this) {
          return function(event) {
            var height, val, width;
            val = _this.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n /g, '<br/>&nbsp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\n$/, '<br/>&nbsp;').replace(/\n/g, '<br/>').replace(/ {2,}/g, function(space) {
              return Array(space.length - 1).join('&nbsp;') + ' ';
            });
            if (/(\n|\r)/.test(_this.value)) {
              val += '<br />';
              if (options.flickering === false) {
                val += '<br />';
              }
            }
            $shadow.html(val);
            if (options.vertical === true) {
              height = Math.max($shadow.height() + heightPadding, minHeight);
              $e.height(height);
            }
            if (options.horizontal === true) {
              $shadow.css('padding-right', $shadow.normalPaddingRight);
              if (options.vertical === false && $e.hasVerticalScrollBar()) {
                $shadow.css('padding-right', "+=" + options.verticalScrollbarWidth + "px");
              }
              width = Math.max($shadow.outerWidth(), minWidth);
              $e.width(width);
            }
            return options.postGrowCallback($e);
          };
        })(this);
        $e.change(update).keyup(update).keydown(update);
        $(window).resize(update);
        return update();
      });
    };
  })(window.jQuery, window);

  getVerticalScrollbarWidth = function() {
    var inner, outer, w1, w2;
    inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";
    outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild(inner);
    document.body.appendChild(outer);
    w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    w2 = inner.offsetWidth;
    if (w1 === w2) {
      w2 = outer.clientWidth;
    }
    document.body.removeChild(outer);
    return w1 - w2;
  };

}).call(this);

$(function() {
   $('.cb-input textarea').autogrow({vertical: true, horizontal: false});
});

.cb-input {
  width: 100%;
  min-height: 45px;
  max-height: 80px;
}

.cb-form {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.cb-input textarea{
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  padding: 6px 14px 2px 10px;
  width: 100%;
  height: 100%;
  font-family: Roboto;
  font-size: 14px;
  border: none;
  resize: none;
  overflow: hidden;
  border: 1px black solid;
}

<body>
  <div class="cb-input">
    <form class="cb-form" action="">
      <textarea></textarea>
    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Answer 2

这是一个有效的fiddle

height can be adjusted by changing the css.

希望它可能会有所帮助。

Textarea不会让父母成长

2 个答案: