Top
Home


<style>
.countchar-limit-error {
background-color: rgba(255, 0, 0, 0.15);
}
</style>

<form>
<textarea name="Textarea" data-countchar="" data-countchar-limit="15" placeholder="Limit is 15 characters, any text"></textarea>
</form>
<p id="countchar-output"></p>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
$('[data-countchar]').countChar({
text: 'Characters:'
});
});
</script>
<script>
// jQuery countChar v1.0.0
(function(d){d.fn.countChar=function(a){function h(a){d(a).on("input",function(){e()})}function e(){var b=0;k.each(function(){var c=d(this).data("countchar"),f=d(this).val();""!==c&&(c=new RegExp(c,"g"),f=(f.match(c)||[]).join(""));var c=f,g=d(this),e=g.data("countchar-limit")||a.limit;e&&c.length>e?(g.addClass(a.limitErrorClass),a.onLimitCallback(g,c)):g.removeClass(a.limitErrorClass);b+=f.length});l(b)}function l(b){a.outputContainer&&(a.text&&"before"===a.textPosition?b=a.text+" "+b:a.text&&"after"===
a.textPosition&&(b=b+" "+a.text),d(a.outputContainer).html(b));a.onCounterCallback(b)}var k=this;a=d.extend({text:"",textPosition:"before",limit:!1,limitErrorClass:"countchar-limit-error",outputContainer:"#countchar-output",onLimitCallback:function(a,c){},onCounterCallback:function(a){}},a);e();return this.each(function(){h(this)})}})(jQuery);
</script>