# Show Character Limit of Input

If a user is inputting text such as Short Text or Paragraph Text, you might want to validate against putting large amounts of text if this input is going to be printed. While Knack does provide a validation rule against character length, the user might not necessarily knows how many characters they can input in a field until submission.

Below is the expected behavior of the custom code.

<figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FvOqMGw3Jdkp2t5jeMWha%2FD848D51E-A0A2-47CB-A0BB-E1F89794DB05.GIF?alt=media&#x26;token=cfdb1e63-cb4b-4d22-9679-e9487645952d" alt=""><figcaption></figcaption></figure>

## The JS

Add the following code below. The only code you will have to modify in your app is **line 39**. The function parameters asks for:

* &#x20;The `view ID` in Knack.
* The `field ID` which is what input you want the character limit to show below.
* The `charLimit` which you can set the character limit for the text input.

{% code lineNumbers="true" fullWidth="true" %}

```javascript
/********************************************************/
/********** Show character limit on text type ***********/
/********************************************************/
function showCharacterLimit(view_id, field_id, charLimit) {
// Function returns list as message string and css dictionary based on the input length and character limit
  function showMessage(inputField) {
    const fieldLength = inputField.val().length;
    var inputLength = Math.abs(charLimit - fieldLength); // No negative numbers 
    var fieldText = fieldLength == 0 ? "allowed" : "left";
    var cssField = {"color": "#4a4a4a", "font-weight": "normal"};
    if (fieldLength > charLimit) { // if the length is over the character limit change the CSS and text
      cssField = {"color": "#ff0000", "font-weight": "bold"}; // make text red and bold instead
      fieldText = "over limit"; // Will say "XXX characters over limit" instead
    }
    return [inputLength + " characters " + fieldText,cssField]; // returns list as [str message, dict css]
  }

  // Shows the message after field input based on character limit and length
  $(document).on("knack-view-render." + view_id, function(event, view, data) {
    // When first viewing the field input
    const formViewFieldID = ".kn-form.kn-view."+ view_id + " form #" + field_id;
    const fieldMessage = showMessage($(formViewFieldID))[0]; 
    $(formViewFieldID).after(`<p class='typed-chars'>${fieldMessage}</p>`);
    
    // When user is typing in the input field change the text and CSS
    $(document).ready(function() { 
      $(formViewFieldID).on('input',function(e){
        const $input = $(this);
        const inputMessage = showMessage($input)[0];
        const cssField = showMessage($input)[1];
        $input.siblings('.typed-chars').text(inputMessage); // Set text message of field
        $input.siblings('.typed-chars').css(cssField); // Set CSS of typed-chars class
      });
    });
  });
};

// Modify 'view_XXX','field_XXX', and 500 below.
showCharacterLimit('view_XXX','field_XXX',500);
```

{% endcode %}

### Option A - only a couple fields

If it is only a couple of fields modify line 39 above. Change the `view_XXX`, `field_XXX` and `500` to what you want it set to.

{% code lineNumbers="true" %}

```javascript
showCharacterLimit('view_XXX','field_XXX',500);
```

{% endcode %}

### Option B  - many fields

If you have many fields, you might want to store the field IDs as a list and use a for loop. You would then need to replace **line 39** with the code snippet below.

{% code overflow="wrap" lineNumbers="true" %}

```javascript
const fieldIDs = [48, 49, 52, 53, 76, 86, 56]; // list of field IDs
// Character limit is set to 500
for (let i = 0; i < fieldIDs.length; i++) {
    showCharacterLimit('view_XXX','field_'+ fieldIDs[i],500);
}
```

{% endcode %}

## The CSS

None needed.

## Note

* If you use Option B, it will set the character limit to the same number. If needed, you can get around this by using Option A, or by storing the field IDs and the character limit value as a dictionary instead of an array.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/atd-knack-operations/knack-code/code-knack-print-page/show-character-limit-of-input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.