Bootstrap模态框中基于Ajax返回值设置textarea高度时scrollHeight恒为0如何解决

问题原因 #

你绑定的是show.bs.modal事件，该事件在模态框开始显示时立即触发，此时模态框还未完成渲染，DOM节点处于display: none的隐藏状态，浏览器不会计算隐藏元素的实际尺寸，所以scrollHeight永远返回0。而用户输入时模态框已经完全显示，元素处于可见状态，所以高度调整逻辑可以正常生效。

解决方案 #

方案1：替换模态框触发事件（最稳妥） #

把监听的事件从show.bs.modal换成shown.bs.modal，这个事件会在模态框全部渲染完成、入场动画结束后触发，此时元素已经可见，尺寸属性可以正常获取。
修改后的代码示例：

$('#editBeverageModal').on('shown.bs.modal', function (event) {
  var button = $(event.relatedTarget) // 触发模态框的按钮
  editBeverageId = button.data('id') // 从data-*属性中提取信息

  $.ajax({
      url: 'UrlHere',
      data: {
          id: editBeverageId
      },
      success: function (data) {   
          $('#beverageDescription').val(data['description']);
          $('#beverageAwards').val(data['awards']);
          // 此时模态框已渲染完成，scrollHeight可以正常读取
          $("#beverageDescription").css('height', $("#beverageDescription").prop('scrollHeight') + 3 + "px");
          $("#beverageAwards").css('height', $("#beverageAwards").prop('scrollHeight') + 3 + "px");
      },
      error: function (jqXHR, textStatus, errorThrown) {
          // 此处设置错误提示
      }
  });
})

方案2：提前请求数据，推迟高度调整逻辑 #

如果你想保留show.bs.modal事件提前发起请求，减少用户等待时间，可以把高度调整逻辑绑定为单次的shown.bs.modal回调，等模态框渲染完成后自动执行，不会重复绑定事件：

$('#editBeverageModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // 触发模态框的按钮
  editBeverageId = button.data('id') // 从data-*属性中提取信息
  const $currentModal = $(this)

  $.ajax({
      url: 'UrlHere',
      data: {
          id: editBeverageId
      },
      success: function (data) {   
          $('#beverageDescription').val(data['description']);
          $('#beverageAwards').val(data['awards']);
          // 绑定单次shown事件，模态框渲染完成后自动执行高度调整
          $currentModal.one('shown.bs.modal', function() {
            $("#beverageDescription").css('height', $("#beverageDescription").prop('scrollHeight') + 3 + "px");
            $("#beverageAwards").css('height', $("#beverageAwards").prop('scrollHeight') + 3 + "px");
          })
      },
      error: function (jqXHR, textStatus, errorThrown) {
          // 此处设置错误提示
      }
  });
})

内容的提问来源于stack exchange，提问作者arc-menace