1、需求示例
1.1 需求
输入银行卡号,每4位自动添加一个空格。
1.2 示例
2、思路
代码参考文献《JavaScript–实现限制input输入框数字输入,实现每四位一个空格效果(银行卡号,手机号等)》,本文主要讲解在泛微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();
});
function keyPress() {
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;//这里做了兼容性处理
if ((keyCode >= 48 && keyCode <= 57)){
event.returnValue = true;
} else {
event.returnValue = false;
};
}
function checkStrLong(){
var reg = /\s{1,}/g;
var str="";//定义页面展示效果的值
var mystr = WfForm.getFieldValue("field30609");
mystr = mystr.replace(reg,"");
for (let i = 0; i < mystr.length; i++) {
if(i%4===0 && i>0){
str = str + " " + mystr.charAt(i);
}else {
str = str + mystr.charAt(i);
}
}
$("#field30609").val(str);
};
4、总结
最近工作增加了金蝶方面的,更新会比较慢,也就没花太多时间去研究这个需求。
再会!
One comment
//
// 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:""}); //} //