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" 
        data-parameterName="singleItem"></textarea>

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

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the Markup, CSS and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• Modernizr
  (used for Future Compatibility checks)
• UI Library - Ajax Form