Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
addClass if limit exceeded
  • Loading branch information
karyboy committed Mar 4, 2013
1 parent 3a51cbe commit c4573de
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 21 deletions.
47 changes: 29 additions & 18 deletions 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();

})


11 changes: 8 additions & 3 deletions index.html
Expand Up @@ -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>

Expand All @@ -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>
Expand Down

0 comments on commit c4573de

Please sign in to comment.