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.

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:

• 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.

/********************************************************/
/********** 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);

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.

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

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.

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);
}

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.