rails 3, erb (или haml), как мы можем ограничить ввод текста до 200 символов с приятным пользовательским опытом?

Question

Это ДОЛЖНО быть тривиально легко, но, похоже, не в Rails ...

нам нужно получить от пользователя не более 200 символов для ввода текста.

если мы используем text_field и установим: maxlength в 200, у нас, похоже, есть только два одинаково УГЛЫХ выбора: (a) сделать поле soooooo широким, используя: размер, который не поместится на экране обычного пользователя ИЛИ (b ) пользователь должен прокручивать горизонтально при наборе текста. Любой подход воняет с точки зрения пользовательского интерфейса.

Конечно, мы хотим использовать text_area, и он автоматически ограничивает ввод до 200 ... но, конечно, text_area НЕТ ограничения.

мы, конечно, не хотим ждать, пока они отправят данные, чтобы сказать им, что «это было слишком долго» или, что еще хуже, просто обрезать свои данные.

какие-нибудь классные идеи? Как у нас есть поле ввода, скажем, 100 символов в ширину и 3 строки, которые не позволят пользователю печатать более 200 символов?

Существует ли какая-либо инфраструктура улучшения пользовательского интерфейса, которая решает такую ​​проблему? Легко ли добавить счетчик javascript таким образом, чтобы мы применяли его ТОЛЬКО к определенным полям ввода?

Answer 1

Попробуйте это: = f.text_field :phone_area, :size => 4, :maxlength => 3

Answer 2

Вы можете ограничить количество символов в текстовом поле, используя JavaScript.

Например, вы можете установить :style => "limit" или :"data-limit"=> 200, а затем использовать селекторы css в jQuery для нацеливания только на эти текстовые поля.

Что-то вроде:

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

Или даже аккуратнее:

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

с плагином типа http://www.stjerneman.com/demo/maxlength-with-jquery или аналогичный http://plugins.jquery.com/plugin-tags/character-counter

Что касается пользовательского интерфейса, вы можете использовать Facebook как текстовое поле: http://www.9lessons.info/2010/03/facebook-like-expanding-textbox-with.html