Question

我正在使用Bootstrap和jQuery创建一个ASP.NET网页。

我最近实现了一个模式来显示日志。单击链接时会显示模式：

<a data-toggle="modal" data-target="#logData">Open</a>

<div class="modal fade" id="logData" tabindex="-1" role="dialog" aria-labelledby="logDataLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Log for @Html.DisplayFor(model => model.Alias)</h4>
            </div>
            <div class="modal-body">
                <textarea class="form-control log" rows="5" placeholder="Log is empty.">@Html.DisplayFor(model => model.Log)</textarea>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

模态包含一个不会自动调整大小的文本区域。

我找到了以下代码：

$('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});

这应该使我的textareas能够自动调整大小，并且它在我的代码中的其他位置工作，但不是在上面的这个模式中。至少在输入textarea时没有，但在打开模态时它确实会自动调整大小。

有谁知道为什么？并最终如何解决它？

谢谢！

在一个模态中自动调整textarea的大小

0 个答案: