Direttiva di text edit con jquery-te

Direttiva di text editing che sfrutta le ottime funzionalita di jquery-te

HTML

<link rel="stylesheet" href="http://jqueryte.com/css/jquery-te.css">
<script src="http://jqueryte.com/js/jquery-te-1.4.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<div class="" id="">
    <textarea id="productDescription"></textarea>
    <div id="experienceDesc" align="right" style="margin-right: 10px;"></div>
</div>
<script>
    
</script>

JavaScript

$("#productDescription").jqte({
    change: function () {
        countChar('productDescription', 'experienceDesc');
    }
});

function countChar(val, divId) {
    var len = $('#' + val).val().length;
    if (len > 500) {
        val.value = val.value.substring(0, 500);
    } else {
        var a = 500 - len;
        var count = "<span style='color:red'>" + a + "</span>";
        var text = "You have";
        var count1 = "<span style='color:grey'>" + text + "</span>";
        var text1 = "characters left";
        var count2 = "<span style='color:grey'>" + text1 + "</span>";
        $('#' + divId).html(count1 + " " + count + " " + count2);
    }
}