# How to limit allowed Text Box inputs

**URL:** https://community.stadium.software/community/t/how-to-limit-allowed-text-box-inputs/120
**Category:** How To
**Created:** [August 6, 2021, 9:06am UTC](https://community.stadium.software/community/t/how-to-limit-allowed-text-box-inputs/120 "2021-08-06T09:06:23Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![franz](https://community.stadium.software/community/letter_avatar_proxy/v4/letter/f/c37758/32.png) [@franz](https://community.stadium.software/community/u/franz)
#### Post date: [August 6, 2021, 9:06am UTC](https://community.stadium.software/community/t/how-to-limit-allowed-text-box-inputs/120/1 "2021-08-06T09:06:23Z")

</div>

This solution adds a maxlength attribute to textboxes. It also adds a countdown to the textbox showing the user how many characters are allowd / remaining. This does not work for password Textboxes! To make this work you need:

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. Add a Javascript action into the Page.Load event with the following script

```
let textBoxContainers = document.querySelectorAll(".text-box-container");
for (let i = 0; i < textBoxContainers.length; i++) {
    let el = textBoxContainers[i];
    if (el.hasAttribute("class") && el.getAttribute("class").indexOf("maxlength_") > -1) {
        let elClasses = el.classList;
        for (let c = 0; c < elClasses.length; c++) {
            if (elClasses[c].indexOf("maxlength_") > -1) {
                let maxlength = elClasses[c].split("_")[1];
                let input = el.querySelector(".text-box-input");
                input.setAttribute("maxlength", maxlength);
                let chremaining = document.createElement("div");
                chremaining.classList.add("chremaining");
                chremaining.innerHTML = maxlength + " remaining";
                el.appendChild(chremaining);
                input.addEventListener("keyup", function (e) {
                    let myInput = e.target;
                    let count = parseInt(myInput.getAttribute("maxlength")) - myInput.value.length;
                    myInput.parentElement.querySelector(".chremaining").innerHTML = count + " remaining";
                });
            }
        }
    }
}
```

1. Paste the CSS below 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](https://community.stadium.software/community/uploads/default/original/1X/76a3482963c54939eb5acf6f9195d002c21665ea.png)