Text limiter

‹ Back

You can limit text fields by adding a data-limiter attribute. The value sent to the attribute is the number of characters you want to limit the field to. eg:

<div class="inputs">
  <div class="control-group string required test_form_character_limited_string"><div class="control-group--label"><label class="string required control-label" for="test_form_character_limited_string"><abbr title="required">*</abbr> Character limited string</label></div><div class="controls"><input class="string required form--medium" data-limiter="30" required="required" aria-required="true" type="text" name="test_form[character_limited_string]" id="test_form_character_limited_string" /></div></div>
  <div class="control-group text required test_form_character_limited_text"><div class="control-group--label"><label class="text required control-label" for="test_form_character_limited_text"><abbr title="required">*</abbr> Character limited text</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="200" required="required" aria-required="true" name="test_form[character_limited_text]" id="test_form_character_limited_text">
</textarea></div></div>
</div>
<%= f.input :example, input_html: { data: { limiter: 30 } } -%>

You can limit by words instead of letters by adding in the data-limiter-word attribute.

<div class="inputs">
  <div class="control-group string required test_form_word_limited_string"><div class="control-group--label"><label class="string required control-label" for="test_form_word_limited_string"><abbr title="required">*</abbr> Word limited string</label></div><div class="controls"><input class="string required form--medium" data-limiter="3" data-limiter-word="" required="required" aria-required="true" type="text" name="test_form[word_limited_string]" id="test_form_word_limited_string" /></div></div>
  <div class="control-group text required test_form_word_limited_text"><div class="control-group--label"><label class="text required control-label" for="test_form_word_limited_text"><abbr title="required">*</abbr> Word limited text</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="10" data-limiter-word="" required="required" aria-required="true" name="test_form[word_limited_text]" id="test_form_word_limited_text">
</textarea></div></div>
</div>
<%= f.input :example, input_html: { data: { limiter: 30, limiter_word: "" } } -%>

Both word and character limiter has a "micro" styling option by adding data-limiter-micro to your input.

<div class="inputs">
  <div class="control-group string required test_form_character_limited_string_micro"><div class="control-group--label"><label class="string required control-label" for="test_form_character_limited_string_micro"><abbr title="required">*</abbr> Character limited string micro</label></div><div class="controls"><input class="string required form--medium" data-limiter="30" data-limiter-micro="" required="required" aria-required="true" type="text" name="test_form[character_limited_string_micro]" id="test_form_character_limited_string_micro" /></div></div>
  <div class="control-group text required test_form_character_limited_text_micro"><div class="control-group--label"><label class="text required control-label" for="test_form_character_limited_text_micro"><abbr title="required">*</abbr> Character limited text micro</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="200" data-limiter-micro="" required="required" aria-required="true" name="test_form[character_limited_text_micro]" id="test_form_character_limited_text_micro">
</textarea></div></div>
  <div class="control-group string required test_form_word_limited_string_micro"><div class="control-group--label"><label class="string required control-label" for="test_form_word_limited_string_micro"><abbr title="required">*</abbr> Word limited string micro</label></div><div class="controls"><input class="string required form--medium" data-limiter="3" data-limiter-word="" data-limiter-micro="" required="required" aria-required="true" type="text" name="test_form[word_limited_string_micro]" id="test_form_word_limited_string_micro" /></div></div>
  <div class="control-group text required test_form_word_limited_text_micro"><div class="control-group--label"><label class="text required control-label" for="test_form_word_limited_text_micro"><abbr title="required">*</abbr> Word limited text micro</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="10" data-limiter-word="" data-limiter-micro="" required="required" aria-required="true" name="test_form[word_limited_text_micro]" id="test_form_word_limited_text_micro">
</textarea></div></div>
</div>
<%= f.input :example, input_html: { data: { limiter: 30, limiter_micro: "" } } -%>