JS實現限制文本框控件文本長度

1.1 問題描述

在實際填報過程中，對於單據類的編号的填報，可能編碼爲标準格式，有固定的長度，例如手機号，固定 11 位數。在填報這類内容時，當字段超過特定的值時，如何設置提醒填報人呢？如下圖所示：

1.2 實現思路

「文本框控件」添加「編輯後」事件，實時監控當前文本框中文本長度，如果長度大於設定的長度，彈窗提醒且文本框中只保留符合長度規範的内容。

2.1 模板準備

新建模板，在 A1 單元格添加「文本框控件」，如下圖所示：

2.2 添加事件

2.2.1 在 JS 中固定長度

點擊選擇 A1 單元格「文本控件」，在「控件設置>事件」處，添加一個「編輯後」事件，實現校驗功能，如下圖所示：

JavaScript 代碼如下：

說明：編輯後事件會在每輸入一個字符後觸發，即每輸入一個字符，就對目前文本框的長度進行一次校驗。

var data=this.getValue();
//獲取到單元格的值
var len=data.length;
//判斷值的長度
if(len>7)
{
contentPane.setCellValue("A1",null,data.substr(0,7));
//如果單元格值長度超過7位,就截取前7位重新賦值給文本框
//A1對應報表中,控件所在單元格位置
alert("最長爲7位");//彈窗顯示
}

2.2.2 通過參數設定長度

1）通過添加參數設定長度，在添加「編輯後」事件前，需先添加一個「模板參數」，如下圖所示，添加參數 maxlen 。

2）添加「編輯後」事件， JS 内容需要修改，JS 中不用固定數字長度，使用參數。如下圖所示：

JavaScript 代碼如下：

var data=this.getValue();
//獲取到單元格的值
var len=data.length;
//判斷值的長度
if(len>Number(maxlen))
{
contentPane.setCellValue("A1",null,data.substr(0,Number(maxlen)));
//如果單元格值長度超過maxlen位,就截取前maxlen位
//A1對應報表中,控件所在單元格位置
alert("最長爲"+Number(maxlen)+"位");
}

2.3 預覽效果

保存模板，選擇填報預覽，效果如 1.1 節所示。

注：不支持移動端。

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\11-JS實現限制文本框控件文本長度.cpt

點擊下載模板：11-JS實現限制文本框控件文本長度.cpt

注：此模板爲通過參數設定長度的模板。