Rails 3、erb（或 haml），我们如何将文本输入限制为 200 个字符，同时获得良好的用户体验？

Question

这应该非常简单，但在 Rails 中似乎并不如此……

我们需要收集用户输入的不超过 200 个字符的文本。

如果我们使用 text_field 并将 :maxlength 设置为 200，我们似乎只有两个同样丑陋的选择：(a) 使用 :size 使字段太宽，以至于它不适合典型用户的屏幕或 (b) 用户打字时必须水平滚动。从用户界面的角度来看，这两种方法都很糟糕。

当然，我们想要的是使用text_area，并让它自动将输入限制为200...但当然text_area没有限制。

我们当然不想等到他们提交数据才告诉他们“太长了”，或者更糟糕的是简单地截断他们的数据。

有什么很酷的想法吗？我们如何让输入框宽 100 个字符、高 3 行，并且不允许用户输入超过 200 个字符？

是否有一些 UI 增强框架可以处理此类 UI 问题？以仅将其应用于某些输入字段的方式添加 JavaScript 计数器是否容易？

Answer 1

试试这个： = f.text_field :phone_area, :size => 4、：最大长度=> 3

Answer 2

您可以使用 javascript 限制文本框中的字符数。

例如，您可以设置 :style => "limit" 或 :"data-limit"=> 200，然后使用 jQuery 中的 css 选择器仅定位那些文本框。

类似的东西：

$(".limit").maxlength({
  // options
})

或者甚至更简洁：

var limited_textbox  = $("[data-limit]");
limited_textbox.maxlength({
  maxCharacters: limited_textbox.data("limit"),
  // options
})

使用像 http://www.stjerneman.com/ 这样的插件演示/maxlength-with-jquery
或类似的http://plugins.jquery.com/plugin-tags/character-counter

至于 UI，您可以使用 facebook 之类的文本框： http://www.9lessons.info/2010/03/facebook-like-expanding-textbox-with.html