Ruby on Rails新手求助：用jQuery实现自适应高度的动态textarea

嘿，作为Rails新手遇到这个问题太正常啦！我帮你一步步搞定动态textarea自动增高，还有编辑帖子时自动适配高度的需求，顺便排查下autosize gem为啥没生效～

一、先排查autosize gem的配置问题 #

很多时候gem不生效都是资产管道加载的问题，咱们一步步核对：

1. 确认Gemfile和依赖安装
   先确保Gemfile里加了这个gem：

   gem 'autosize'
   

   然后跑bundle install安装依赖。

2. 在JS文件中引入autosize
   打开app/assets/javascripts/application.js，添加下面这行（注意要放在jQuery之后，如果你的项目用了jQuery的话）：

   //= require autosize
   

3. 正确初始化autosize
   因为Rails默认用Turbolinks，直接用DOMContentLoaded可能在页面切换后失效，所以要绑定turbolinks:load事件。在app/assets/javascripts/posts.js（如果没有就新建一个）里加：

   document.addEventListener('turbolinks:load', function() {
     // 选中所有textarea并初始化autosize
     autosize(document.querySelectorAll('textarea'));
     // 要是用jQuery的话可以这么写：autosize($('textarea'));
   });
   

   这样页面加载和Turbolinks跳转后，autosize都会生效。

二、如果gem还是不行？试试原生JS实现 #

有时候gem可能和项目的JS环境有兼容性问题，原生JS其实就能轻松实现，还更灵活：

在posts.js里加这段代码就行：

document.addEventListener('turbolinks:load', function() {
  const textareas = document.querySelectorAll('textarea');
  
  textareas.forEach(textarea => {
    // 初始化时适配已有内容（编辑帖子的场景）
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
    
    // 输入时动态调整高度
    textarea.addEventListener('input', function() {
      this.style.height = 'auto';
      this.style.height = `${this.scrollHeight}px`;
    });
  });
});

原理很简单：每次输入先把高度重置为auto，再根据内容的滚动高度设置实际高度，编辑帖子时初始化就会自动适配已有内容的高度，完美解决你的需求！

三、结合你的表单代码优化 #

给你的_form.html.erb做个小调整，让效果更好：

<%= form_for @post, remote: true do |form| %>
  <% if @post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>
      <ul>
        <% @post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :content %>
    <%= form.text_area :content, class: "form-control", rows: 1 %>
    <!-- 把rows设为1，让初始高度更紧凑，JS会自动撑开 -->
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

给textarea加个class方便后续样式调整，初始rows设为1，避免默认高度太高。

四、AJAX提交后的适配 #

因为你用了remote: true做AJAX提交，提交后局部刷新页面的话，可能需要重新初始化高度。在posts.js里再加这段：

// 监听AJAX成功事件，重新适配高度
document.addEventListener('ajax:success', function(event) {
  const textareas = document.querySelectorAll('textarea');
  textareas.forEach(textarea => {
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
  });
});

这样不管是初次加载、编辑帖子，还是AJAX提交后，textarea都能完美自动调整高度啦！

内容的提问来源于stack exchange，提问作者Dragos Alexandru Stoian