JQuery触发textarea按键事件无效及内边距异常问题求助

这个问题的核心是自动调整高度的函数没有在样式变更后重新执行，导致textarea的高度还是基于旧样式计算的scrollHeight，新添加的padding-bottom被固定的height值给“覆盖”了。

为什么会出现这个情况？ #

你的autosize函数只绑定在了input事件上，只有在用户输入内容时才会重新计算高度。但点击按钮添加BgA类时，textarea的内边距（尤其是上下内边距）发生了大幅变化，这时候元素的scrollHeight已经改变了，但因为没有触发input事件，autosize没重新运行，textarea的高度还是之前计算的数值——这个高度刚好把新增的padding-bottom给“挤没了”，直到你输入内容触发input事件，重新计算高度后，padding-bottom才正常显示。

而你尝试的.trigger("keypress")没用，是因为keypress事件并不会触发input事件（至少在jQuery 1.9.1里这个触发逻辑不成立），而且就算触发了，也属于绕远路的操作，直接调用函数才是最可靠的。

修复代码 #

只需要在添加类之后，手动调用一次autosize函数即可，修改你的点击事件代码：

$(".BgChanger").on("click", function() {
  var $textarea = $(".main_textarea");
  $textarea.addClass("BgA");
  // 手动调用autosize，基于新样式重新计算高度
  autosize.call($textarea[0]);
});

补充优化建议 #

你还可以优化一下autosize函数，减少重复的css调用，让代码更简洁：

function autosize() {
  var $this = $(this);
  // 先重置高度为auto，再设置为scrollHeight
  $this.css('height', 'auto').css('height', $this.prop('scrollHeight'));
}

这样修改后，点击按钮添加样式类的同时，会立刻重新计算textarea的高度，padding-bottom就能正常显示了。

内容的提问来源于stack exchange，提问作者joe