Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

add a class if character limit exceed's #1

Merged
merged 1 commit into from

2 participants

@karyboy

add a class if the character count exceeds the limit.
For example,
If we want to change the color of couter_label to red when limit exceeds,

we can have a class

.limit{
   color:red
}

we call the counter function with options

$('textarea[data-max-length]').counter({'limitExceedClass':'limit'});
@krisleech
Owner

Thanks! Is this backwards compatible, so not including limitExceedClass would still work as before? Looking at your code I see your default to an empty string, is addClass('') a no-op?

@karyboy

Yes , this is backwards compatible . Even if we do not include limitExceedClass , this works as before . addClass("") does not add any class with an empty string..

@krisleech krisleech merged commit c545523 into from
@karyboy

Thanks ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 4, 2013
  1. @karyboy

    addClass if limit exceeded

    karyboy authored
This page is out of date. Refresh to see the latest.
Showing with 37 additions and 21 deletions.
  1. +29 −18 counter.jquery.js
  2. +8 −3 index.html
View
47 counter.jquery.js
@@ -1,22 +1,33 @@
-(function($){
- $.fn.counter = function() {
- return this.each(function() {
- max_length = parseInt($(this).attr('data-max-length'));
+(function ($) {
+ $.fn.counter = function (options) {
+ var defaults={
+ limitExceedClass:''
+ };
+ var options=$.extend({},defaults,options);
+ return this.each(function () {
+ max_length = parseInt($(this).attr('data-max-length'));
- var length = $(this).val().length;
- $(this).parent().find('.counter_label').html(max_length-length + ' characters left');
- // bind on key up event
- $(this).keyup(function(){
- // calc length and truncate if needed
- var new_length = $(this).val().length;
- if (new_length > max_length-1) {
- $(this).val($(this).val().substring(0, options.max_length));
- }
- // update visual counter
- $(this).parent().find('.counter_label').html(max_length-new_length + ' characters left');
- });
- });
- };
+ var length = $(this).val().length;
+ $(this).parent().find('.counter_label').html(max_length - length + ' characters left');
+ // bind on key up event
+ $(this).keyup(function () {
+ // calc length and truncate if needed
+ var new_length = $(this).val().length;
+ if (new_length > max_length - 1) {
+ $(this).parent().find('.counter_label').addClass(options.limitExceedClass);
+ }
+ else {
+ $(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();
+
+})
View
11 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>
Something went wrong with that request. Please try again.