门户开发-组件介绍-文本字段、多行文本、地址、组合框
本篇介绍 O2OA 门户设计器中的文本字段、多行文本、地址与组合框组件。文本字段用于录入单行文本；多行文本的属性、事件与方法与文本字段相同，可录入多行内容；地址组件是地市选择器，可按省、省市或省市县选择；组合框则在下拉选项中挑选取值。文中分别说明各组件的基本属性、系统事件与常用方法，便于搭建门户表单页面与信息展示界面。
O2OA 平台具备门户页面定制与集成的能力，通过门户定制可根据企业文化与业务需要，设计符合企业需要的统一信息门户和系统首页等 UI 界面。本篇介绍页面设计器元素组件中的文本字段、多行文本、地址与组合框。
1、先决条件
1、O2Server 服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署 O2OA》
2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录 O2OA 平台，如：xadmin
3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》
二、文本字段
文本字段就是一个输入框，用于文本输入。
1、文本字段属性
文本字段特有的基本属性如下：
属性 | 描述 | 备注 |
显示图标 | 是否显示文本字段图标 | |
Input 样式 | 通过 css 定义 input 元素的样式 | 文本字段在 html 的直接 dom 结构为<div><input /></div>；，所以样式属性调整的是 div 的样式，input 样式渲染 input 对象的样式。 |
计算 | 可以通过脚本计算出文本字段的默认值 | 在页面中，“创建“、”保存“和”显示“的表现都是一样的，这个选项在表单中有区别。 |
校验 | 此字段在页面中无效 | 在流程表单中用于提交时的数据校验 |
区段属性在门户页面中无效，只在流程表单中生效。
2、文本字段事件
除了 DOM 事件之外，文本字段的系统事件如下：
事件名 | 描述 |
queryLoad | 元素被载入之前执行 |
load postLoad | 元素被载入之后执行 |
change | 输入框内容变化时触发 |
3、文本字段方法
文本字段对象可以通过以下脚本获取：
var el = this.page.get(name); //name为文本字段的标识
获取的对象有以下方法可以使用：
方法名（属性） | 用法 | 描述 |
show | el.show() | 显示元素 |
hide | el.hide() | 隐藏元素 |
addEvent | el.addEvent(name, fun) | 给元素绑定系统事件。 name：事件按名称 fun： 执行的方法 |
node | var dom= el.node | 获取 html 原生 Dom 对象 |
setData | el.setData(str) | 设置文本字段的值 |
getData | var value = el.getData() | 获取文本字段的值 |
三、多行文本
多行文本的属性、事件和方法都和文本字段一致，它可以输入多行内容。
四、地址
地址组件是一个地市选择器，可以选择省份、地区等内容。
1、地址属性
地址特有的基本属性如下：
属性 | 描述 | 备注 |
是否只读 | 如果选“是”则不允许编辑 | |
Address 样式 | 通过 css 定义地址选择器内部的样式 | |
选择范围 | 地址可选层级，省、省市、省市县 | |
计算 | 可以通过脚本计算出地址的默认值 | 在页面中，“创建“、”保存“和”显示“的表现都是一样的，这个选项在表单中有区别。 |
校验 | 此字段在门户页面中无效 | 在流程表单中用于提交时的数据校验 |
区段属性在门户页面中无效，只在流程表单中生效。
2、地址事件
与文本字段事件一致
3、地址方法
与文本字段一致
五、组合框
组合框是一个文本输入框并且会有下拉可选项进行选择。
1、组合框属性
组合特有的基本属性如下：
属性 | 描述 | 备注 |
是否只读 | 如果选“是”则不允许编辑 | |
分隔符 | 可选值的数据分割符号，可用正则表达式 | |
显示分隔符 | 页面上多选值的时候，显示的分割符 | |
可选数量 | 最多可选的选项数，0表示不限制 | |
显示选项 | 下拉选项列表什么时候显示出来 | |
可选值 | 固定值，在下面可选值中直接配置。 脚本，在下面脚本框中输入生成可选值数组的脚本动态计算，可通过脚本异步请求后台 api 来获取可选值数组 | 通过脚本返回选择项时，需要返回一个字符串数组，每个元素为一个选择项。每个字符串值格式：“text|value”，其中 text 为显示的文本；value 为真正的值。 |
Input 样式 | 通过 css 定义 input 元素的样式 | 文本字段在 html 的直接 dom 结构为<div><input /></div>；，所以样式属性调整的是 div 的样式，input 样式渲染 input 对象的样式。 |
计算 | 可以通过脚本计算出组合框的默认值 | 在页面中，“创建“、”保存“和”显示“的表现都是一样的，这个选项在表单中有区别。 |
校验 | 此字段在门户页面中无效 | 在流程表单中用于提交时的数据校验 |
区段属性在门户页面中无效，只在流程表单中生效。
2、组合框事件
与文本字段事件一致
3、组合框方法
与文本字段一致
以上是门户设计器中文本字段、多行文本、地址与组合框组件的简要说明，如需了解门户页面开发的更多内容，请参考以下文章：
《门户开发-快速入门开发一个门户实例》《门户开发-组件介绍-容器、通用元素》《门户开发-组件介绍-数据源、子数据源、数据文本》《门户开发-组件介绍-文本、图片、按钮》《门户开发-组件介绍-表格》《门户开发-组件介绍-iframe、HTML》《门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图》《门户开发-组件介绍-文本字段、多行文本、地址、组合框》《门户开发-组件介绍-人员组织》《门户开发-组件介绍-日期选择》《门户开发-组件介绍-下拉框、单选框、多选框》《门户开发-组件介绍-平台应用》《门户开发-组件介绍-数据表格》《门户开发-组件介绍-ElementUI 组件》《门户开发-组件介绍-部件、部件元素》
用户常见问题
整理自藕粉社区真实提问，按浏览量排序
Q如何设置文本字段在disabled状态下的字体颜色
文本字段在 html 中的直接 dom 结构为 div 包裹的 input 元素，因此样式属性调整的是 div 的样式，input 样式用于渲染 input 对象。
查看原帖讨论 · 18,853 次浏览
以上问题仍无法解决？到 藕粉社区 提问，或致电 400-888-0545。
相关内容
浙公网安备33010602013943号