Keeping Count of Text Length in a TextBox

{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

Last week, jdeleon7010 posted a topic about restricting text length in a text element on a Workflow form.

Does workflow have a builtin component for specifying a character limit in a multiline text box?

I did this once, a long time ago – so I pulled out my workflow archives, swept the dust off, and cringed at some of my old work.  I found the javascript I needed for the demo, though.

Symantec Workflow Custom Text Character Count
This gif demonstrates the countdown (and count up, when removing characters) method to inform a user just how much space remains in the box.

I wasn’t able to find the old code before jdeleon7010 sorted out a workable javascript solution, but I thought it prudent that I archive the method a bit better and post it here.

Here’s what you’ll need for this demo:

  • A TextBox with a Control Id
  • A Label with a Control Id (in the attached demo package it’s an AsciiMergeLabel, but a Label will work the same way)
  • Set the “Text” value for the Label at the initial (empty) textbox count (in this example, it’s set at “500 Characters Remaining”)

Here’s the javascript that goes in the Script section of your form:


function textLenCount(tarElem, tarLabel) {
var inputField = document.getElementById(tarElem);
var inputLabel = document.getElementById(tarLabel);
if (inputField != null) {
if (inputField.value.length > 500) {
inputField.value = inputField.value.substring(0, 500);
inputLabel.innerHTML = '0 Characters Remaining';
}
else {
inputLabel.innerHTML = 500 - inputField.value.length + ' Characters Remaining';
}
}
}

And here’s the javascript to leverage the “oninput” function of the TextBox.  Be sure to give both the TextBox and the Label Control Ids.  This code goes in the Body Custom Events section of your form.


var inputField = document.getElementById('InputField');
inputField.setAttribute('oninput','textLenCount("InputField", "ReadField")');

This code will also prevent more characters than the prescribed limit (in this case, 500 characters).

Brandon Sanderson - Mistborn Trilogy
Check out the Mistborn series if you just can’t wait to find out the rest of the story. Sorry to leave you hanging, but someone put a 500-character limit on this box.

Further Reading

Leveraging the “oninput” Event in Workflow

Original Symantec Connect Post


Featured Components

TextBox

Label

AsciiMergeLabel


Demo Package

Download the demo package from the Demo page.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s