Question

This SHOULD be trivially easy, but doesn’t seem to be in Rails…

we need to gather text input from the user of no more than 200 chars.

if we use text_field, and set :maxlength to 200, we seem to have only two equally UGLY choices: (a) make the field soooooo wide using :size that it won’t fit on a typical user’s screen OR (b) the user has to scroll horizontally while typing. Either approach stinks from a UI point of view.

what we WANT of course is to use text_area, and have it automatically limit the input to 200… but of course text_area has NO limit.

we certainly don’t want to wait until they SUBMIT the data to tell them “that was too long” or even worse simply truncate their data.

any cool ideas? How do we have an input box say 100 chars wide and 3 lines tall that will not let the user type more than 200 characters?

Is there some UI-enhancement framework that handles this sort of UI issue? Is adding a javascript counter in such a way that we apply it ONLY to certain input fields easy?

Answer 1

You can limit number of characters in textbox using javascript.

You can, for example set a :style => "limit" or :"data-limit"=> 200 and then use css selectors in jQuery to target only those textboxes.

Something like:

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

Or even neater:

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

With a plugin like http://www.stjerneman.com/demo/maxlength-with-jquery
or similar http://plugins.jquery.com/plugin-tags/character-counter

As for UI, you could use facebook like textbox: http://www.9lessons.info/2010/03/facebook-like-expanding-textbox-with.html