JSFiddle - React, Tailwind, and code Playground

by Avinash Zala

HTML

<textarea name="message1" class="limiter textarea_pro" id="message1" rel="25"></textarea><br/>
<textarea name="message2" class="limiter textarea_pro" id="message2" rel="500"></textarea><br/>
<textarea name="message3" class="limiter textarea_pro" id="message3" rel="25"></textarea><br/>
<input type="text" class="limiter" rel="50" />

CSS

.textarea_pro{
border:1px solid #7f9db9; font-size:13px; font-weight: normal; color:#000000; width:265px; height:100px; background-color:#FFF;
margin:7px 0px 3px 0px; padding-right:3px; padding-bottom:3px; padding-left:3px; padding-top:3px;
}

#counter_div
{
    height: 20px; left:0px; top:0px; line-height:19px;
    width:50px; background-color:#333;
    position:absolute; display:block; visibility:hidden;
    z-index:522; text-align:center; color:#FFF; font-size:13px; font-weight:bold; padding-top:0px;
    font-family:Verdana, Geneva, sans-serif;
}

JavaScript

var TextLimiter = new Class({
    
        //implements
        Implements: [Options, Events],
    
        //options
        options: {
            textAreaClass: 'limiter',
            textLengthAttr: 'rel',
            counterId : 'counter_div',
            leftPosition:0,
            topPosition:0
        },
        //initialization
        initialize: function(options) {
            this.setOptions(options);
            this.AddDiv();
            this.assignEvents();
        },
        assignEvents: function() {
            $$('.'+this.options.textAreaClass).each(function(ele){
                var $this = this;
                ele.addEvents({
                    focus: function(){
                        if(ele.retrieve('pos-left'))
                        {
                            var posleft = ele.retrieve('pos-left');    
                        }
                        else
                        {
                            var posleft = parseInt(ele.getPosition().x)+parseInt(ele.getSize().x) +'px';
                            ele.store('pos-left', posleft);
                        }
                        if(ele.retrieve('pos-top'))
                        {
                            var postop = ele.retrieve('pos-top');    
                        }
                        else
                        {
                            var postop = parseInt(ele.getPosition().y)+parseInt(ele.getSize().y)-parseInt($($this.options.counterId).getStyle('height').toInt())+ 'px';
                            ele.store('pos-top', postop);
                        }
                        
                        $($this.options.counterId).setStyles({
                            'left': posleft,
                            'top' : postop,
                            'visibility':'visible'
                        });

                        $($this.options.counterId).innerHTML = parseInt(ele.get($this.options.textLengthAttr))-parseInt(ele.value.length);
  ...