How to limit allowed Text Box inputs

This solution adds a maxlength attribute to textboxes when it is applied. It also adds a countdown to the textbox howing the user how many characters are allowd / remaining. To limit Text Boxes to a specific number of characters, you need three ingredients:

  1. Add a Javascript action into the Page.Load event with the following script
$(".text-box-container").each(function(){
 var el = $(this);
 if ((el.attr("class")) && (el.attr("class").indexOf("maxlength_") > -1)){
  var classList = el.attr('class').split(/\s+/);
   $.each(classList, function(index,item) {
    if (item.indexOf("maxlength_") > -1) {
     var sp = item.split("_");
     var maxlength = sp[1];
     var input = el.find(".text-box-input"); 
     input.attr("maxlength", maxlength);
     /*add the next 4 lines to display a countdown per textbox*/
     el.append("<div class='chremaining'>" + maxlength + " remaining</div>");
     input.keyup(function(){
        el.find(".chremaining").text((maxlength - input.val().length) + " remaining");
     });
     /*countdown feature end*/
   }
  });
 }
});
  1. Add a class to the Text Box you want to limit like this:
    maxlength_[the number you want to limit the textbox to]
    for example: maxlength_20 will limit the textbox to 20 characters

  2. If you are using the contdown feature, paste the CSS into your StyleSheet to style the countdown element (if you don’t have a stylesheet in your Application Explorer, you need to enable it in the Application Properties)

.chremaining {
   /*this positions the countdown label top right of the textbox*/
  position:absolute;
  top: 0;
  right: 18px;
  /*font colour*/
  color:#cccccc; 
  font-size:11px;
}

The result:
image

1 Like