Dialog Character Count

characterCount.js

//characterCount function specified on dialog node
function (textbox, max) {
    var count = max - document.getElementById(textbox.el.id).value.length;
    var counter = textbox.container.dom.nextElementSibling;
    if (count < 0) {
        counter.innerHTML = '<b>Max characters: (' + max + ')</b> <span style=\"color:#fb4c50;\">Remaining: (' + count + ')</span><br /><br />' + textbox.fieldDescription;
    } else {
        counter.innerHTML = '<b>Max characters: (' + max + ')</b> Remaining: (' + count + ')<br /><br />' + textbox.fieldDescription;
    }
}

dialog.infinity.json

{
    "xtype": "dialog",
    "characterCount": "function(textbox, max) { 
	var count = max - document.getElementById(textbox.el.id).value.length;
	var counter = textbox.container.dom.nextElementSibling;
	if (count < 0) { counter.innerHTML = '<b>Max characters: (' + max + ')</b> <span style=\"color:#fb4c50;\">Remaining: (' + count+')</span><br /><br />' + textbox.fieldDescription;
	} else { counter.innerHTML = '<b>Max characters: (' + max + ')</b> Remaining: ('  + count + ')<br /><br />' + textbox.fieldDescription; }
}",
    "height": "400",
    "stateful": "false",
    "jcr:primaryType": "cq:Dialog",
    "items": {
        "jcr:primaryType": "cq:WidgetCollection",
        "tabs": {
            "jcr:primaryType": "cq:TabPanel",
            "panel": {
                "title": "Panel Title",
                "jcr:primaryType": "cq:Widget",
                "items": {
                    "jcr:primaryType": "cq:WidgetCollection",
                    "textfield": {
                        "xtype": "textarea",
                        "fieldLabel": "Text Area",
                        "name": "./fieldName",
                        "enableKeyEvents": true,
                        "jcr:primaryType": "cq:Widget",
                        "fieldDescription": "Field Description:",
                        "listeners": {
                            "keyup": "function() { var fieldName = ''; var tmpField = this.findParentByType('dialog').getField(fieldName); this.findParentByType('dialog').characterCount(tmpField, 140);}",
                            "beforeloadcontent": "function() { var fieldName = ''; var tmpField = this.findParentByType('dialog').getField(fieldName); this.findParentByType('dialog').characterCount(tmpField, 140);}",
                            "loadcontent": "function() { var fieldName = ''; var tmpField = this.findParentByType('dialog').getField(fieldName); this.findParentByType('dialog').characterCount(tmpField, 140);}",
                            "jcr:primaryType": "nt:unstructured"
                        }
                    }
                }
            }
        }
    }
}

listenerFunction.js

// anonymous function attached to keyup / beforeloadcontent / loadcontent listener nodes
function() { 
  var fieldName = '';
  var tmpField = this.findParentByType('dialog').getField(fieldName);
  this.findParentByType('dialog').characterCount(tmpField, 140);
}