app/assets/javascripts/character_limited_fields.js

@@ -1,15 +1,27 @@
 $(function() {
+    'use strict';
+
     $('[data-behaviour="character-limited"]').each(function() {
         $(this).on("keyup", characterCounter);
+        $(this).trigger("keyup");
     });
 
     function characterCounter() {
         var $field = $(this);
-        var $count = $field.next().children(".character_limited_counter");
+        var $countParagraph = $field.next();
+        var $count = $countParagraph.children('.character_limited_counter');
 
-        var maxlength      = parseInt($field.attr("maxlength"));
+        var maxlength      = parseInt($field.data('maxlength'));
         var remainingChars = maxlength - $field.val().length;
 
+        if (remainingChars < 0) {
+            if (!$countParagraph.hasClass('character_limit_exceeded')) {
+                $countParagraph.addClass('character_limit_exceeded');
+            }
+        } else {
+            $countParagraph.removeClass('character_limit_exceeded');
+        }
+
         $count.html(remainingChars);
     }
 

app/assets/stylesheets/controllers/application_drafts.sass

@@ -24,11 +24,18 @@
 #team, #student
   margin-right: 420px
 
+.character_limited
+  position: relative
+
 textarea.character_limited + p
   display: inline-block
   margin: 0
-  position: relative
-  left: 12px
-  top: -1.8em
+  position: absolute
+  right: 0
+  bottom: -8px
   font-size: 0.7em
   color: #737373
+
+.character_limit_exceeded
+  color: #a94442 !important
+

app/inputs/character_limited_input.rb

@@ -1,6 +1,6 @@
 class CharacterLimitedInput < SimpleForm::Inputs::TextInput
   def input_html_options
-    super.merge(maxlength: Student::CHARACTER_LIMIT, data: { behaviour: 'character-limited' })
+    super.merge(data: { behaviour: 'character-limited', maxlength: Student::CHARACTER_LIMIT })
   end
 
   def input(wrapper_options)
@@ -10,9 +10,7 @@ def input(wrapper_options)
   private
 
   def counter
-    chars_left  = Student::CHARACTER_LIMIT - @builder.object.send(attribute_name).size
-    num_element = content_tag(:span, chars_left, class: 'character_limited_counter')
-
+    num_element = content_tag(:span, 0, class: 'character_limited_counter')
     content_tag(:p, "#{num_element} character(s) left".html_safe)
   end
 end