Limited Textarea

As part of a new UI library, I have created a Limited Textarea in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Limited Textarea supports the following features:

• The maxlength is used to not only limit the length, but a counter is shown to display the remaining characters left.
• Fully integrates with the UI Library - Ajax Form feature.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Future Proof
  • Simple Implementation

The Demo

The Markup

Just a basic textarea element, with a normal class, maxlength and sizing attributes. Once the CSS and Script stuff are in place on a website, any page can implement the Limited Textarea by simply setting the textarea element's class attribute to "limitedTextarea" and setting the maxlength to a desired string length limitation.

That sounds like a DRY solution to me (see UI Manifesto).

 
<div class="form legendLook horizontalFormLayout">
    <div id="hdivFormTest1ConfirmationMessage" class="confirmationMessageWrapper hide"></div>
            
    <label for="txtLimited">Description:</label>
    <textarea id="txtLimited" class="limitedTextarea"
        required 
        placeholder="Please enter some text and see the counter adjust accordingly."
        rows="10" 
        cols="60"
        maxlength="500"            
        data-formGroup="formAuthenticate" 
        name="Value"></textarea>

    <div class="formButtonWrapper clearFix">
        <input type="submit" class="ajaxFormPost buttonStrong" value="Submit"
            data-formGroup="formAuthenticate" 
            data-serviceRequestUrl="..." 
            data-successFunction="successFormTest1"
            data-confirmActionMessage=""
            data-processingMessage=""
            data-overlayWindowWhileProcessing="true" />
    </div>
</div>

The Script

//Enable Limited Textarea(s)
$(parentElementSelector + " textarea.limitedTextarea").each(function () {
    $(this).wrap("<div id=\"" + $(this).attr("id") + "_wrapper\" class=\"limitedTextarea\" />");
    $("#" + $(this).attr("id") + "_wrapper").append("<div id=\"" + $(this).attr("id") + "_counterWrapper\">" + $("#lblLimitedTextareaCharacterRemainingText").html().replace("#", $(this).attr("maxlength")) + "</div>");

    $(this).keyup(function (event) {
        var requestingElement = $("#" + event.target.id);
        $("#" + requestingElement.attr("id") + "_counterWrapper").html($("#lblLimitedTextareaCharacterRemainingText").html().replace("#", (requestingElement.attr("maxlength") - requestingElement.val().length)));
    });
});    

The CSS

 
.horizontalFormLayout div.limitedTextarea { float:left; margin-top:9px; }
div.limitedTextarea div { color:#B8AFA2; }