addClass if limit exceeded

krisleech · Mar 4, 2013 · c4573de · c4573de
1 parent 3a51cbe
commit c4573de
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/counter.jquery.js b/counter.jquery.js
@@ -1,22 +1,33 @@
-(function($){
+(function ($) {
-  $.fn.counter = function() {
+    $.fn.counter = function (options) {
-    return this.each(function() {
+        var defaults={
-      max_length = parseInt($(this).attr('data-max-length'));
+            limitExceedClass:''
+        };
+        var options=$.extend({},defaults,options);
+        return this.each(function () {
+            max_length = parseInt($(this).attr('data-max-length'));
 
-      var length = $(this).val().length;               
+            var length = $(this).val().length;
-      $(this).parent().find('.counter_label').html(max_length-length + ' characters left');
+            $(this).parent().find('.counter_label').html(max_length - length + ' characters left');
-      // bind on key up event
+            // bind on key up event
-      $(this).keyup(function(){
+            $(this).keyup(function () {
-        // calc length and truncate if needed
+                // calc length and truncate if needed
-        var new_length = $(this).val().length;
+                var new_length = $(this).val().length;
-        if (new_length > max_length-1) {
+                if (new_length > max_length - 1) {
-          $(this).val($(this).val().substring(0, options.max_length));
+                    $(this).parent().find('.counter_label').addClass(options.limitExceedClass);
-        }
+                }
-        // update visual counter
+                else {
-        $(this).parent().find('.counter_label').html(max_length-new_length + ' characters left');
+                    $(this).parent().find('.counter_label').removeClass(options.limitExceedClass);
-      });
+                }
-    });
+                // update visual counter
-  };
+                $(this).parent().find('.counter_label').html(max_length - new_length + ' characters left');
+            });
+        });
+    };
 })(jQuery);
+$(document).ready(function () {
+    $('textarea').counter();
+
+})
 
 
diff --git a/index.html b/index.html
@@ -11,9 +11,14 @@
 	<script src='counter.jquery.js' type='text/javascript'></script>
 	<script type="text/javascript" charset="utf-8">
 		$(function(){
-			$('textarea[data-max-length]').counter();
+			$('textarea[data-max-length]').counter({'limitExceedClass':'limit'});
 		})
 	</script>
+	<style>
+      .limit{
+      	color:red;
+      }
+	</style>
 </head>
 <body>
 
@@ -25,12 +30,12 @@
 	<form>
 		<div>
 			<div class='counter_label'></div>
-			<textarea data-max-length="200">type here</textarea>
+			<textarea data-max-length="20">type here</textarea>
 		</div>
 
 		<div>
 			<div class='counter_label'></div>
-			<textarea data-max-length="200">type here</textarea>
+			<textarea data-max-length="20">type here</textarea>
 		</div>		
 	</form>
 </body>