在引导模式中删除文本区域的垂直滚动条 - css jquery c# .net mvc答案

【问题标题】：Remove vertical scrollbar for textarea in bootstrap modal - css jquery c# .net mvc在引导模式中删除文本区域的垂直滚动条 - css jquery c# .net mvc
【发布时间】：2020-07-21 00:54:17
【问题描述】：

我通过 jquery（来自我的数据库）向引导模式提供值。表单值从一行变为多行。我不想要滚动条。我希望 textarea 元素增加其高度以适应内容。我怎样才能做到这一点？下面是我的html，

 <div class="modal-body">
    <div class="form-group">
        <label class="col-form-label">Background:</label>
            <textarea class="form-control bg" disabled> </textarea>

我正在使用下面的 jquery 将值输入我的文本区域，

$('#Modal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget) // Button that triggered the modal  
     var back = button.data('back')
     var modal = $(this)
     modal.find($('.bg')).val(back);

现在文本区域出现了我想避免的垂直滚动条。我希望文本区域自动增加其高度以适应内容。

我不能使用除“Textarea”元素之外的其他元素，因为它是唯一包含内容格式的元素。

尝试获取上述 bg 类的滚动高度，但它返回零。我猜它在执行上面的 jquery 元素后没有获取 textarea 的值。

我为此工作了 5 个多小时，但找不到解决方案。非常感谢您的帮助。

【问题讨论】：

将溢出设置为隐藏不起作用？
不，它没有。 :( 它删除了滚动条，但不显示它剪切的全部内容

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

终于找到了使用2个模态触发器的解决方案。 Bootstrap 具有“show.bs.modal”事件，该事件在单击按钮（打开模态）后立即触发，并且 bootstrap 有另一个甚至称为“shown.bs.modal”的事件，它在显示模态后触发。所以我像下面这样拆分我的代码以适应 textarea 中的内容。

$('#Modal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget) // Button that triggered the modal  
     var back = button.data('back')
     var modal = $(this)
     modal.find($('.bg')).val(back);
});

$('#Modal').on('shown.bs.modal', function (event) {
     var hg = $('.bg').prop('scrollHeight');
     var modal = $(this)
     modal.find($('.bg')).height(hg);
});

由于某种未知的原因，每次打开模式时滚动高度都会增加，并且大小不会减小文本区域以适应较小的内容。因此，为了克服这个问题，我在分配新高度之前手动将 textarea 的高度设置为零。下面是修改后的代码，

$('#Modal').on('shown.bs.modal', function (event) {
            var modal = $(this);
            modal.find($('.bg')).height(0);
            var hg = $('.bg').prop('scrollHeight');                
            modal.find($('.bg')).height(hg);
});

【讨论】：