JSFiddle - React, Tailwind, and code Playground

by adamjford

HTML

<form>
    <div id="form-fields">
        <div class="Text">
            <textarea cols="20" id="FormFields_3__Text" maxlength="1000" name="FormFields[3].Text" rows="2" tabindex="4"></textarea>
            <span class="countdown">0/1000 characters</span>
        </div>
    </div>
</form>

CSS

textarea {
    width: 338.1333312988281px;
    height: 53.31666564941406px;
}

CoffeeScript

$ ->
    $form = $('form')
    $form.delegate 'textarea', 'focusin', ->
    
    $form.delegate 'textarea', 'focusout', ->

    
    $form.delegate '.Text *', 'keydown', (e) ->
    
    update_countdown = ->
        $this = $ this
        countdown = $this.siblings '.countdown'
        max = $this.attr 'maxLength'
        hasMax = max? and max > 0
        count = $this.val().length

        text = count
        text += '/' + max if hasMax
        text += ' characters'

        countdown.html text
        countdown.toggleClass 'max-exceeded', hasMax and count > max
        
    selector = '#form-fields textarea'
    $form.delegate selector, 'change keyup', update_countdown