Verbal,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.btn {
background: #c0d83a url(/images/branding/buttons/btn-green-on-white-94x20.gif) no-repeat;
}
.err {
background: #DDDDDD;
}
#count.err{
color: #FF0000;
background: #FFFF33;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var btnButton = $("#btn"), area = $("#symbols"), maxLength = area.data("maxlength");
$("#count").text(maxLength);
area.on("input", function() {
var number = maxLength - this.value.length;
btnButton.prop("disabled", number < 0).add("#count")[(number < 0 ? "add": "remove")+"Class"]("err");
$("#count").text(number||"max symbols");
});
});
</script>
</head>
<body>
<textarea id="symbols" name="" data-maxlength="5"></textarea>
<input id="btn" name="" type="button" value="ok" class="btn">
<span id="count"></span>
</body>
</html>
