Implement Character Countdown and Enforce maximum length on textfield xtype CQ5

In this post we will see how to enforce maximum length on the textfield xtype and stop user to enter the text afterwards and implement character countdown which shows how many characters are left as the user type in.

• As we know that CQ5 ships with extjs 3.4.The textfield xtype does have maxLength property which prevents user to submit the longer text than the maximum length defined.But it does so by the validation and doesn't actually stop user to input extra text.
• As there is no support for character countdown in extjs 3.4 in CQ5. We will see how we can leverage the listeners and inlinetextfield xtype to implement character countdown in Dialog.

Our Final output would look like this :

Part 1: Implement Maximum length

Step 1: Create a cq:widget node with name heading with following properties

• name(string) : ./heading
• fieldLabel(string): Heading
• xtype(string): textfield
• enableKeyEvents(string): true    {this property will be used in next part to implement character counter}

Step 2: Create a nt:unstructured node under the node created in step 1 with name listeners with following property

• render(string):

  function(th) {
      th.getEl().dom.maxLength = 50;
  }

NOTE: Above code will set the maximum limit as 50 and afterwards the user would not be able to type in the textfield

Nodes output:

Part 2: Implement Character countdown
To implement character countdown we will use an additional node of xtype inlinetextfield

Step 1: create a cq:widget node with name headingcount with following properties:

• name:(string): ./cc
• defaultValue(string) : Maximum 50 Characters allowed
• xtype(string) : inlinetextfield
• disabled(string) : true

Step 2: Create a nt:unstructured node under the node created in step 1 with name listeners with following property

• loadcontent(string):

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var newCount = (40 - sub);
    field.setValue(newCount + " " + "characters left");
}

• render(string):

function(field) {
    field.getEl().dom.style.textAlign = "right";
}

Step 3: Add the following properties on the listener node created under step 2 of part 1

• keyup(string):

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var cc = field.findParentByType("dialog").getField("./cc");
    var newCount = (50 - sub);
    cc.setValue(newCount + " " + "characters left");
}

• keypress(string):

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var cc = field.findParentByType("dialog").getField("./cc");
    var newCount = (50 - sub);
    cc.setValue(newCount + " " + "characters left");
}

• keydown(string):
  

function(field) {
    var sub = field.findParentByType("dialog").getField("./heading").getValue().length;
    var cc = field.findParentByType("dialog").getField("./cc");
    var newCount = (50 - sub);
    cc.setValue(newCount + " " + "characters left");
}

Nodes output:

Output: