Limiting the Text Length in the Text Box Widget by JS

Version

Application Scenario

During the actual data entry process, the invoice number may be encoded to be in a standardized format with a fixed length, for example, a phone number with exactly 11 fixed digits.

During the data entry of such content, when the field length exceeds the fixed value, you need to set a prompt, as shown in the following figure.

Implementation Method

You can add an After Editing event for the text box widget, allowing you to monitor the text length in the current text box in real time.

If the length exceeds the fixed value you set, a prompt will pop up, and only the content that meets the length requirement will be retained in the text box.

Method one is used to set a fixed number directly in JS to validate the text length.

Template Creation

Create a general report, as shown in the following figure.

Widget Adding

Add a text widget for cell A1, as shown in the following figure.

Event Adding

Select cell A1, choose Widget Setting > Event, and add an After Editing event, as shown in the following figure. The event is triggered each time you enter a character. That is, each time you enter a character, the text length in the current text box is validated.

The JavaScript code is as follows.

Note:

When the data length to be validated changes, you can modify the number used to validate the length in JS.

var data=this.getValue();
//Obtain the value in the cell.
var len=data.length;
//Check the length of the value.
if(len>7)
{
_g().setCellValue("A1",data.substr(0,7));
//If the length of the value in the cell exceeds seven characters, the first seven characters will be truncted and reassigned to the text box.
//A1 refers to the poistion where the widget in the report is located.
alert("A maximum of seven characters is supported.");//The pop-up box appears.
}

Method two is used to set a template parameter, and validate the text length with the parameter in JS.

Template Creation

The procedure is the same as that shown in section "Template Creation" (in section "Method One: Using a Fixed Number in JS"). No further details will be provided here.

Widget Adding

The procedure is the same as that shown in section "Widget Adding" (in section "Method One: Using a Fixed Number in JS"). No further details will be provided here.

Parameter Adding

Add a template parameter maxlen and set a default value, as shown in the following figure.

Note:

When the data length to be validated changes, you can modify the default value of the template parameter.

Event Adding

Select cell A1, choose Widget Setting > Event, and add an After Editing event, as shown in the following figure. The event is triggered each time you enter a character. That is, each time you enter a character, the text length in the current text box is validated.

The JavaScript code is as follows.

var data=this.getValue();
//Obtain the value in the cell.
var len=data.length;
//Check the length of the value.
if(len>Number(maxlen))
{
_g().setCellValue("A1",data.substr(0,Number(maxlen)));
//If the length of the value in the cell exceeds the maxlen characters (namely, seven), the first seven characters will be truncated.
//A1 refers to the position where the widget in the report is located.
alert("A maximum of "+Number(maxlen)+" characters is supported.");
}

Note: 

The effect cannot be previewed on mobile terminals.

The preview effects realized by method one and method two are the same.

Save the template and click Data Entry Preview. The effect is the same as that shown in section "Application Scenario."

For details about method one, you can download Method One_Using a Fixed Number in JS.cpt.

For details about method two, you can download Method Two_Using a Parameter.cpt.