泛微O A开发技巧流程表单H T M L扩展开发设计器实现设置表单元素的长度文件编码（008-TTIG-UTITD-GKBTT-PUUTI-WYTUI-8256）版本文档主题(Title) 【开发技巧】流程表单HTML 扩展开发（推荐：设计器实现设置表单元素的长度）作者(Author)胡顺 审批者(To Be Approved By)说明(Comments)文件名称(File Name)【开发技巧】流程表单HTML 扩展开发（推荐：设计器实现设置表单元素的长度）.doc序号 日期 版本变更说明 修改人 注释 2017-12-19创建目录功能点 刘泰宏 2018-2-1完善各模块内容 胡顺目录仅限阅读 请勿传播流程表单HTML 设计器 实现自定义控制表单元素的长度及其他常见需求实现案例1.说明难度：★★★☆☆预计时间：1小时涉及代码开发：有目标需求：此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。

当不得不这么做的时候，请参考该方案进行适当调整。

可以按照客户要求对时间流程表单进行适当改造。

流程表单上面布局、校验、样式等功能可以jQuery的方式进行适当改造。

知识点：基本信息：背景知识：1、在阅读本教程之前,需具备html和JavaScript基本知识。

2、在阅读本教程之前,需具备jsp页面读写的基本能力。

最终效果：通过流程表单HTML设计器实现自定义控制表单元素的长度实现隐藏表单原始边框实现表单元素未输入内容时悬浮提醒的效果html签字节点格式调整（内容在左，署名在右）html签字节点按时间排序并调整格式2.准备工作1、准备一台和正式环境一致操作系统的服务器。

3.（推荐）实现自主设置表单元素的长度将附件提供的上传到服务器的/css/width/目录下面。

3.1.支持PC端及手机端HMTL模式流程表单（单个流程）1.在代码块中单个流程引入css样式文件<LINK href="/css/width/"type=text/css rel=STYLESHEET>如（如图1）。

（图1）2.在需要自主设置长度单元格式设置class 例如图2 里面的class w50 表示设置这个框子里面的input长度为50px。

如果设置为w100 则限制长度为100px，具体效果如图3（图2）（图3）3.2.H MTL模式流程引入样式文件（一劳永逸）1.新建流程界面流程引入css样式文件<LINK href="/css/width/" type=text/cssrel=STYLESHEET>需要修改ecology/workflow/request/文件。

如（如图4）。

（图4）2.查看及处理流程界面流程引入css样式文件<LINK href="/css/width/"type=text/css rel=STYLESHEET>需要修改ecology/workflow/request/。

如（如图4）。

（图5）3.手机端流程界面流程引入css样式文件<LINK href="/css/width/"type=text/css rel=STYLESHEET>需要修改ecology/mobile/plugin/1/。

如（如图6）。

（图6）4.实现隐藏表单元素表单边框的需求4.1.代码块<style>.excelOuterTable input,.excelOuterTable select,.excelOuterTable .e8_innerShow,.excelOuterTable .e8_outScroll{border: 0px !important;}</style>4.2.实现效果例：原生页面（图7）开发修改后：5.实现表单未输入内容时悬浮提醒的效果此方法只适用于输入框提示。

5.1.代码块1.在代码块中插入代码<script type="text/javascript">$(document).ready(function(){inputTipText();});function inputTipText(){$("div[class*=holder] input").each(function(){if($(this).val() == ""){var oldVal=$(this).parent(".holder").attr("data-holder");if($(this).val()==""){$(this).attr("value",oldVal).css({"color":"#888"});} $(this).css({"color":"#888"}).focus(function(){if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val( "").css({"color":"#888"})}}).blur(function(){if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}}).keydown(function(){$(this).css({"color":"#000"})});}});}</script>2.在需要自主设置提示内容的单元格设置class名为holder（如果属性名称class已经存在，需在原有名称后空格后添加holder），以及设置自定义属性为提示内容data-holder的值，例如图8 里面的class w50 表示设置这个输入框的提示内容为“请输入标题”，如图8。

注： class名为holder，自定义属性名为data-holder，不可更改。

具体效果如图9（图8）5.2.实现效果例：原生界面开发修改后：（图9）6.实现提交时校验身份证号码的需求6.1.代码块<script type="text/javascript">jQuery(document).ready(function(){checkCustomize = function(){var issubmit=false;var card=jQuery("#field11365").val();issubmit = IdentityCodeValid(card);return issubmit;};});function IdentityCodeValid(code) {var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};var tip = "";var pass= true;if(!code || !/^\d{6}(18|19|20)\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/(code)){tip = "身份证号格式错误";pass = false;}else if(!city[(0,2)]){tip = "地址编码错误";pass = false;}else{eady(function(){checkCustomize = function(){var issubmit=false;if(jQuery("#field11359").attr("checked")){("提醒：选择框已经选中!");issubmit=true;}else{("提醒：选择框未选择!");}return issubmit;}});7.html打印时解决签字意见多个空格问题7.1.代码块将以下代码块放在ecology\workflow\request\文件中，如下图：<script type="text/javascript">jQuery(document).ready(function(){jQuery(".span_mc").each(function(){var a=(jQuery(this).html());emove();pan_mc").next("br").remove();pan_mc").parent().find("br").remove();}});});</script>7.2.实现效果例：原生界面删除空的签字意见和一个换行符删除空的签字意见和全部换行符8.（推荐）多内容区域多节点签字意见排序8.1.多个签字节点按时间先后正序排序1.将以下代码放在ecology\workflow\request\ （已办）和ecology\workflow\request\ （待办），文件中，如下图：2.<style>.excelTempDiv .td_edesign .remark{ display: none; }.excelTempDiv .td_edesign .span_mc{ display: block !important; }.excelTempDiv .td_edesign .span_mc span{ display: block; }</style><script >$(document).ready(function() {onSortDesc();});var onSortDesc = function() {var ul = jQuery('.remark');for(var i = 0; i < ; i++) {var lis = jQuery('.remark:eq(' + i + ')').children('.span_mc'); var ux = [];for(var j = 0; j < ; j++) {var tmp = {};= lis[j];var remindTime = lis[j].(lis[j]. - 20);var str = ();= new Date(/-/g, '/'));(tmp);}(function(a, b) {return - ;});for(var g = 0; g < ; g++) {ul[i].appendChild(ux[g].dom);}jQuery('.remark').find('br').remove();jQuery('.remark').show();}}</script>3.在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。