Textarea 调整大小 JS 脚本错误

Posted 2023-05-07

【中文标题】Textarea 调整大小 JS 脚本错误

【英文标题】：Textarea resize JS script bug

【发布时间】：2020-09-09 19:19:26

【问题描述】：

我正在尝试修复我为调整表单的<textarea> 大小而编写的 javascript 中的一个错误。

我希望它根据文本行数调整大小。理想情况下，应该遵循底线。

表格链接：LorenzoMengolini.com/contact

<script>
(function($)  
var span = $('<span>').css('display','inline-block')
.css('word-break','break-all').appendTo('body').css('visibility','hidden');
function initSpan(textarea)
  span.text(textarea.text())
      .width(textarea.width())      
      .css('font',textarea.css('font'));

$('textarea').on(
    input: function()
      var text = $(this).val();      
      span.text(text);      
      $(this).height(text ? span.height() : '1.1em');
    ,
    focus: function()
     initSpan($(this));
    ,
    keypress: function(e)
        if(e.which == 13) e.preventDefault();
    
);
)(jQuery);
</script>

【参考方案1】：

这段代码不是比javascript函数更好吗？

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

【讨论】：

感谢@djcaesar9114 的建议我已经在页面上实现了。你可以在这里看到结果lorenzomengolini.com/contact 唯一的问题是当文本被删除时，textarea 不会恢复到原始大小。有可能解决这个问题吗？非常感谢您的支持