创建具有动态扩展文本框的表单答案

【问题标题】：Creating a Form with Dynamically Expanding Text Boxes创建具有动态扩展文本框的表单
【发布时间】：2016-08-16 13:56:06
【问题描述】：

我完全不熟悉 Rails、HTML、CSS 和 Javascript。

我正在创建一个表单，我有两个要求：

1) 我希望文本框随着文本在其中的扩展而扩展（请参阅：http://jsfiddle.net/gLhCk/5/）

2.) 我希望这些文本框成为表单的一部分，在提交时更新数据库中的对象。

我已经让这两个部分分开工作——我可以制作一个可以扩展但不在数据库中设置值的文本框，我可以制作一个可以更新数据库但没有文本框的表单自动展开。

困难在于将这两件事结合起来 - 将 Javascript 文本框合并到我正在更新数据库的表单中。

这是我更新数据库的表单（带有静态文本框）：

<div class="row">
  <div class="col-md-6 col-md-offset-3">

    <%= form_for(@user) do |f| %>

    <div class="row">
      <h3> Background </h3>

      <div class="row">
        <%= f.label :hobbs, 'Hobbies' %>
        <%= f.text_field :hobbies, class: 'fcdzfform-control' %>
      </div>
    </div> 
  </div>
</div>

这是适用于自动扩展文本框的 Javascript 代码：

<body>
    <textarea id="txtInput"></textarea>
<script src="jquery.autogrow-textarea" type="text/javascript"></script>

<script>
    $(#txtInput).autoGrow();
</script>

就像我说的，我完全不喜欢所有这些东西，但我从网上浏览得到的印象是我需要完全放弃 .erb 表格和make a pure Javascript form，但我仍然失败了看看如何让 Javascript 表单更新我的数据库中的值，就像上面的 .erb 表单所做的那样。

还有建议/指导？谢谢！

【问题讨论】：

标签： javascript jquery html ruby-on-rails ruby

【解决方案1】：

请参阅：Unobtrusive Javascript。

您需要将 Javascript 与 html.erb 分开。您可以将此 Javascript 添加到您的 app/assets/javascripts 文件夹中的相关文件中。所以，例如：

# app/assets/javascripts/sitewide/field-expand.js
(function(){
  $('.expand').autoGrow();
}());

# app/views/product/_form.html.erb
<div class="row">
  <div class="col-md-6 col-md-offset-3">

    <%= form_for(@user) do |f| %>

    <div class="row">
      <h3> Background </h3>

      <div class="row">
        <%= f.label :hobbs, 'Hobbies' %>
        <%= f.text_field :hobbies, class: 'fcdzfform-control expand' %>
      </div>
    </div> 
  </div>
</div>

我目前无法测试上述内容，所以当然，它未经测试。（还要确保您的 jQuery 选择器用引号括起来，例如 $('#txtInput') 而不是 $(#txtInput)）

【讨论】：

当我尝试这样做时，该类似乎没有正确加载——没有可扩展文本框我得到了相同的行为。可能是因为我不太了解 $('.expand').autoGrow();部分。我是制作一个仅包含该行的文件，还是将该行添加到呈现可扩展文本框的 javascript 文件中？
我在假设.autoGrow() 是一个在调用时操纵DOM 对象以调整其大小的函数。考虑到这一点，可以将其放入app/assets/javascripts 中自己的 .js 文件中。我忘了让它立即被调用，所以我为此目的编辑了我的原始回复。如果还是不行，我得在家做个项目试试，大概2小时左右。
嗯。好吧，我从这里的第一个答案中复制了 Javascript。 stackoverflow.com/questions/9784547/… 所以我刚刚创建了一个名为 'jquery.autogrow.js' 的文件，并将其放在我的 app/assests/javascripts 目录中，它可以工作，尽管我还必须包含一个“javascript 链接标签”来链接它。跨度>
比我预期的要晚一点，抱歉。那很有意思;它是否在您的app/assets/javascripts 目录中某处并由您的application.js 加载？很高兴知道您成功了。
对不起！我的意思是说 javascript 文本框可以工作——但它仍然不能在表单中工作！很抱歉造成混乱！