Question

我有一个带自动高度和可调节textarea的div。我希望父div根据内容自动展开/折叠。

要在Chrome中重新创建问题：

向下调整文本框的大小以增加父div的高度
将文本框重新调整为其初始位置。您将看到父高度不会缩回。

*可拖动的文本区域只是select2框的表示。

以下是jsFiddle以下内容：

#parent {
  background-color: green;
  -webkit-column-count: 2;
}

<div id="parent">
  <div>
	<textarea></textarea>
  </div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

如何在文本区域折叠后将div缩回/折叠回初始高度？

Answer 1

我已将相关的Javascript代码添加到您的 jsfiddle 以获取所需的功能，请查看链接：

Auto Fill Textarea

＆＃13;

var autoExpandTextArea = function (textAreaName, maxRows, minRows) {
    var textarea = document.getElementById(textAreaName);
    var limitRows = maxRows;
    if(textarea === null || minRows > maxRows)
        return;
  
    var commonEventHandlerCode = function(textAreaA, limitRowsB, scrollHeightC)
    {
        var rows = parseInt(textAreaA.getAttribute("rows"));
            if (rows < limitRowsB && textAreaA.scrollHeight > scrollHeightC) {
                rows++;
            } else if (rows > 1 && textAreaA.scrollHeight < scrollHeightC) {
                rows--;
            }

            scrollHeightC = textAreaA.scrollHeight;
            textAreaA.setAttribute("rows", rows);
    };
   
    textarea.setAttribute("rows", minRows);
    var messageLastScrollHeight = textarea.scrollHeight;
    if ($.browser == "MSIE") {
        $(textarea).keyup = function () {
            commonEventHandlerCode(textarea, limitRows, messageLastScrollHeight);
        };
    } else {
        textarea.oninput = function () {
            commonEventHandlerCode(textarea, limitRows, messageLastScrollHeight);
        };
    }
};
autoExpandTextArea("textarea", 4, 2);

＆＃13;

#parent{
    background-color:green;
    -webkit-column-count:2;
}

＆＃13;

<div id="textarea">
    <div><textarea></textarea></div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
</div>

＆＃13;

Answer 2

如果您没有给出固定高度，您的父div（#textarea）将自动调整大小。如果你只想垂直调整大小而不是尝试使用 -

textarea {
    resize: vertical;
    overflow: auto;
}

Answer 3

考虑使用contenteditable属性作为textarea的替代品。它将表现为正常的块元素（因此扩展了更多内容），但它是可编辑的。缺点是需要javascript将其内容添加到表单字段，以便将其发布到服务器。

有关示例，请参阅this edited fiddle 编辑：添加了一个示例，说明编辑后编辑可以如何折叠到它的初始大小。

Answer 4

CSS列分布存在许多错误，这可能是Masonry被大量使用的原因。

您可以尝试强制webkit浏览器重新呈现textarea输入上的列或调整大小。另一个问题是：webkit不会在textarea上触发resize事件，所以你也需要定义它：

$(document).on('ready', function() {
	/* Chrome does not trigger textarea resize: */
	$('textarea').each(function (i) {
		var thisTextarea = $(this);
		thisTextarea.data('x', thisTextarea.outerWidth());
		thisTextarea.data('y', thisTextarea.outerHeight());
		thisTextarea.on('mouseup', function (e) {
			if (thisTextarea.outerWidth() != thisTextarea.data('x') || thisTextarea.outerHeight() != thisTextarea.data('y')) {
				thisTextarea.trigger('resize');
			};
			thisTextarea.data('x', thisTextarea.outerWidth());
			thisTextarea.data('y', thisTextarea.outerHeight());
		});
	});

	var colContainer = $('#parent');
	$('textarea').on('input resize', function (e) {
		colContainer.css({
			'-webkit-column-count': '1'
		});
		setTimeout(function () {
			colContainer.css({
				'-webkit-column-count': '2'
			});
		}, 0);
	});
});

#parent {
    background-color: green;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="parent">
    <div>
        <textarea></textarea>
    </div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
</div>

<强> Playground Fiddle

Answer 5

我使用一些jquery来匹配高度。

例如。

function equalHeight() {
    //Checks if the leftside height is bigger           
    if ($(".leftside:visible").height() >= $(".rightside:visible").height()) { 
        $(".rightside:visible").height($(".leftside:visible").height());        

        //  alert("Changing to leftside height");
    } else {
        //Change leftside height to the current rightside
        $(".leftside:visible").height($(".rightside:visible").height());

        //alert("Changing to rightside height");
    }
}

Div css自动调整内容的高度

5 个答案: