JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<div class="foo">
    <textarea maxlength="500" id="comment_content"></textarea>
    <span class="compteur"></span>
</div>

<input type="submit" value="Commenter">

CSS

body {
    padding: 20px;
}

textarea {
    z-index: 5;
    min-height: 55px;
    width: 550px;
    max-width: 550px;
    padding: 6px 80px 6px 10px;
    background-color: #F5F8F9;
    border: 1px solid #EAEAEA;
    border-bottom-width: 0;
    font: 13px/1.5em "Lucida Grande", "Helvetica Neue", sans-serif;
    color: #535353;
    outline: none;
    overflow: hidden;
}

.foo {
    position: relative;
    display: inline;
}

.foo .compteur {
    position: absolute;
    z-index: 10;
    bottom: 7px;
    right: 10px;
    font: bold 40px/1 "Helvetica Neue", sans-serif;
    color: rgba(0,0,0,.2);
}

.negatif {
    color: rgba(255,0,0,.4) !important;

}

input[type="submit"] {
    display: block;
    margin-top: 5px;
    padding: 0 6px;
    border: 1px solid #CFDADF;
    height: 27px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 13px;
    color: #94A5AD;
    text-align: center;
    text-shadow: 0 1px 0 #FAFAFA;
    cursor: pointer;
    /* Gradient */
    background: -webkit-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: -moz-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: -o-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: -ms-linear-gradient(top, #F1F2F2, #E6E8E9);
    background: linear-gradient(top, #F1F2F2, #E6E8E9);
}

input[type="submit"]:hover,
input[type="submit"]:focus {
    color: #7B8A92;
    /* Gradient */
    background: -webkit-linear-gradient(top, #f1f2f2, #ddd);
    background: -moz-linear-gradient(top, #f1f2f2, #ddd);
    background: -o-linear-gradient(top, #f1f2f2, #ddd);
    background: -ms-linear-gradient(top, #f1f2f2, #ddd);
    background: linear-gradient(top, #f1f2f2, #ddd);
}

textarea,
input[type="submit"] {
    /* Border radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

JavaScript

// Version évoluée : http://jsfiddle.net/Didier/ME6sS/

$(document).ready(function() {

    var commentLength, caractRestant, classCompteur = $('.foo .compteur'),
        IdTextarea = document.getElementById('comment_content');

    nbreCaract = IdTextarea.getAttribute('maxlength');
    IdTextarea.removeAttribute('maxlength'); //Note 1
    classCompteur.text(nbreCaract);

    IdTextarea.onkeyup = function() {

        commentLength = this.value.length;
        caractRestant = nbreCaract - commentLength;
        classCompteur.text(caractRestant);

        if ( caractRestant < 0 ) {
            classCompteur.addClass('negatif');
        } else {
            classCompteur.removeClass('negatif');
        }

    };

    $('input[type="submit"]').click(function() {
        if (caractRestant < 0) {
            alert('Commentaire trop long.'); //A remplacer par des effets plus jolis
            return false;
        }
    });

});

/*
NOTE 1 - Si JS est activé, l'attribut 'maxlength' est retiré de façon à ce que la longueur du commentaire puisse aller dans le négatif (plus agréable qu'une coupure nette pour reformuler son commentaire en plus court). Si JS est désactivé, 'maxlength' reste en place. Tout est OK.

- - -
Par Didier De Vos
http://didierdevos.be
*/