泛微OA_E9之输入银行卡号，每4位自动添加一个空格

## 1、需求示例

#### 1.1 需求

输入银行卡号，每4位自动添加一个空格。

#### 1.2 示例

![示例](https://xug.cc/usr/uploads/2024/03/1955900489.png)

## 2、思路

代码参考文献[《JavaScript–实现限制input输入框数字输入，实现每四位一个空格效果（银行卡号，手机号等）》](https://www.cnblogs.com/zaishiyu/p/14263749.html)，本文主要讲解在泛微OA_E9实现过程。

第一步，“银行卡号”字段类型为单行文本框，因为整数字长最多为11位，不满足大部分银行卡号长度；

第二步，因为“银行卡号”字段类型为单行文本框，故需要先限制只能为数字输入，用到的泛微API为：“WfForm.bindFieldAction”；如直接用“WfForm.bindFieldChangeEvent”，会造成只有值变动时，才会限制只能为数字输入，在此之前，是可以输入非数字等。

## 3、步骤

#### 3.1 本次使用E9流程表单前端接口API介绍

`具体《E9流程表单前端接口API》详情，请参考泛微官方文献，本篇只介绍需要用到的API。`

##### 3.1.1 获取单个字段值

`getFieldValue: function(fieldMark)`
参数说明

|  参数 | 参数类型 | 必须 | 说明 |
| --- | --- | --- | --- |
| fieldMark | String | 是 | 字段标示，格式 field${字段ID}  |

样例：

`var fieldvalue = WfForm.getFieldValue("field110");`

##### 3.1.2 字段区域绑定动作事件

```
推荐使用值变化事件实现开发,因为此接口点击、双击等动作不是绑定到字段元素，是字段所在单元格区域即会触发
此接口所有功能都通可以新版公式实现
```

|  类型 | 说明 |
| --- | --- |
|  onblur	|  失去焦点事件，仅支持单行文本类型 |
|  onfocus	|  获取焦点事件，仅支持单行文本字段类型 |
|  onclick	|  单击事件，字段所在单元格区域单击触发 |
|  ondbclick	|  双击事件，字段所在单元格区域双击发 |
|  mouseover	|  鼠标移入事件，鼠标移入字段所在单格区域触发|
|  mouseout	|  鼠标移出事件，鼠标移出字段所在单格区域触发 |

`bindFieldAction: function(type, fieldids, fn)`

参数说明

| 参数	| 参数类型| 	必须	| 说明
| --- | --- | --- | --- |
type| 	String	| 是	| 动作类型，见上表
fieldids| 	String	| 是	| 字段id集合，多个逗号分隔，明细字段不加下划线对所有行生效
fn	| Function| 	是	| 触发函数，此函数入参接收两个参数，fieldid以及rowIndex行号

样例：

```
WfForm.bindFieldAction("onfocus", "field111,field222", function(fieldid,rowIndex){
alert("单行文本字段111获取焦点触发事件");
alert("明细第"+rowIndex+"行字段222获取焦点触发事件");
});

WfForm.bindFieldAction("onclick", "field333", function(){
alert("浏览按钮字段单击触发事件，不是指点放大镜选择，是整个字段所在单元格区域单击都会触发");
});
```

##### 3.1.3 表单字段值变化触发事件

```
字段值变化即会触发所绑定的函数，可多次绑定

bindFieldChangeEvent: function(fieldMarkStr,funobj)
```

参数说明

|参数|	参数类型	|必须	|说明
| --- | --- | --- | --- |
fieldMarkStr|	String	|是	|绑定字段标示，可多个拼接逗号隔开，例如：field110(主字段),field111_2(明细字段)……
funobj|	Function	|是	|字段值变化触发的自定义函数，函数默认传递以下三个参数，参数1：触发字段的DOM对象，参数2：触发字段的标示(field27555等)，参数3：修改后的值|

样例：

```
WfForm.bindFieldChangeEvent("field27555,field27556", function(obj,id,value){
console.log("WfForm.bindFieldChangeEvent--",obj,id,value);
});
```

特别注意：

```
//如果字段绑定事件，事件内改变本字段的值，需要setTimeout延时下
WfForm.bindFieldChangeEvent("field111", function(obj,id,value){
window.setTimeout(function(){
WfForm.changeFieldValue("field111",{value:"修改本字段值需要延时"});
}, 10);
WfForm.changeFieldValue("field222",{value:"修改非本字段不需要延时"});
});
```

#### 3.2 上代码

```
//点击输入框时，只能输入纯数字
WfForm.bindFieldAction("onclick", "field30609", function(){
keyPress();
});
//当输入框有变化时，实现每4位空一格
WfForm.bindFieldChangeEvent("field30609", function(obj,id,value){
checkStrLong();
});

## 4、总结

最近工作增加了金蝶方面的，更新会比较慢，也就没花太多时间去研究这个需求。

再会！

## 1、需求示例

#### 1.1 需求

输入银行卡号，每4位自动添加一个空格。

#### 1.2 示例

![示例](https://xug.cc/usr/uploads/2024/03/1955900489.png)

## 2、思路

第一步，“银行卡号”字段类型为单行文本框，因为整数字长最多为11位，不满足大部分银行卡号长度；

## 3、步骤

#### 3.1 本次使用E9流程表单前端接口API介绍

`具体《E9流程表单前端接口API》详情，请参考泛微官方文献，本篇只介绍需要用到的API。`

##### 3.1.1 获取单个字段值

`getFieldValue: function(fieldMark)`
参数说明

|  参数 | 参数类型 | 必须 | 说明 |
| --- | --- | --- | --- |
| fieldMark | String | 是 | 字段标示，格式 field${字段ID}  |

样例：

`var fieldvalue = WfForm.getFieldValue("field110");`

##### 3.1.2 字段区域绑定动作事件

`bindFieldAction: function(type, fieldids, fn)`

参数说明

样例：

WfForm.bindFieldAction("onclick", "field333", function(){
alert("浏览按钮字段单击触发事件，不是指点放大镜选择，是整个字段所在单元格区域单击都会触发");
});
```

##### 3.1.3 表单字段值变化触发事件

```
字段值变化即会触发所绑定的函数，可多次绑定

bindFieldChangeEvent: function(fieldMarkStr,funobj)
```

参数说明

样例：

```
WfForm.bindFieldChangeEvent("field27555,field27556", function(obj,id,value){
console.log("WfForm.bindFieldChangeEvent--",obj,id,value);
});
```

特别注意：

#### 3.2 上代码

## 4、总结

最近工作增加了金蝶方面的，更新会比较慢，也就没花太多时间去研究这个需求。

再会！

Last modification：March 8, 2024

如果觉得我的文章对你有用，请随意赞赏

One comment

1
April 19th, 2023 at 07:06 pm

//
// jQuery(document).ready(function(){ // //将需要插入按键的单元格的id设置为a // jQuery("#a").html(""); // }) // // function newButtona(){ // WfForm.changeFieldValue("field12772", {value:""}); //} //
//
// jQuery(document).ready(function(){ // //将需要插入按键的单元格的id设置为b // jQuery("#b").html(""); // }) // // function newButtonb(){ // WfForm.changeFieldValue("field13225", {value:""}); //} //