Foxit PDF SDK For Web - V11.0.2

# 表单属性编辑组件

内置表单属性编辑组件是 Foxit PDF SDK for Web 中预设的一些常用表单属性编辑组件，例如字段名、表单域的可见性，以及外观设置 (外框颜色、填充颜色、文本字体和字号) 等。这些内置组件允许用户在无需编写更多代码的情况下，便捷地自定义表单属性对话框布局。

以下根据表单域类别进行分类，列出了 Foxit PDF SDK for Web 中内置的表单属性编辑组件。

# 通用表单属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:field-name-editor PDFFormField (opens new window) setName / getName DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.NAME 输入框 编辑表单字段名称
form-designer-v2:field-alternate-name-editor PDFFormField (opens new window) setAlternateName / getAlternateName DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.ALTERNATE_NAME 输入框 编辑表单字段备用名称
form-designer-v2:widget-visible-type-selector Widget (opens new window) setFlags / getFlags DataEvents.annotationUpdated /AnnotUpdatedType.flagsUpdated 下拉框 设置表单域的可见性：可见、隐藏、可见但不可打印、隐藏但可打印
form-designer-v2:field-orientation-selector Widget (opens new window) setRotation/ getRotation DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetRotationUpdated 下拉框 设置表单域的显示方向 (旋转度数)
form-designer-v2:field-readonly-checkbox PDFFormField (opens new window) setFlags / updateFlagByOptions /describeFieldFlags / isReadonly DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.FLAGS 复选框 设置表单域是否只读
form-designer-v2:field-required-checkbox PDFFormField (opens new window) setFlags / updateFlagByOptions /describeFieldFlags / isRequired DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.FLAGS 复选框 设置表单域是否必填，仅对 CheckBox、 RadioBox、TextField 有效
form-designer-v2:widget-border-color-picker Widget (opens new window) setMKBorderColor / getMKBorderColor DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetMKBorderColorUpdated 拾色器 设置表单域的边框颜色
form-designer-v2:widget-line-style-selector Widget (opens new window) setBorderStyle / getBorderStyle DataEvents.annotationUpdated / AnnotUpdatedType.borderStyleUpdated 下拉框 设置表单域的外框线型
form-designer-v2:widget-fill-color-picker Widget (opens new window) setMKFillColor / getMKFillColor DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetMKFillColorUpdated 拾色器 设置表单域的填充颜色
form-designer-v2:widget-line-thickness-selector Widget (opens new window) setBorderWidth / getBorderWidth DataEvents.annotationUpdated / AnnotUpdatedType.borderStyleUpdated 下拉框 设置表单域的外框线宽
form-designer-v2:widget-text-size-selector Widget (opens new window) setTextSize / setDefaultAppearance / getTextSize / getDefaultAppearance DataEvents.annotationUpdated / AnnotUpdatedType.defaultAppearanceUpdated 可输入的下拉框 设置表单域的文本字号
form-designer-v2:widget-text-color-picker Widget (opens new window) setTextColor / setDefaultAppearance / getTextColor / getDefaultAppearance DataEvents.annotationUpdated / AnnotUpdatedType.defaultAppearanceUpdated 拾色器 设置表单域的文本颜色
form-designer-v2:widget-font-selector Widget (opens new window) setDefaultAppearance / getFont DataEvents.annotationUpdated / AnnotUpdatedType.defaultAppearanceUpdated 下拉框 设置表单域的文本字体
form-designer-v2:field-text-direction Widget (opens new window) setDirectionRTL / getDirectionRTL DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetDirectionRTLUpdated 单选框 设置表单域显示方向 (从左到右/从右到左)
form-designer-v2:widget-position-properties Widget (opens new window) setRect / getRect DataEvents.annotationUpdated / AnnotUpdatedType.rectUpdated 复合面板组件 设置表单域位置和大小，允许用户指定单位以及固定宽高来修改位置
form-designer-v2:lock-widget-checkbox Widget (opens new window) setFlags / getFlags DataEvents.annotationUpdated / AnnotUpdatedType.flagsUpdated 复选框 设置表单域是否锁定，锁定后的表单域的所有属性都将不可编辑
form-designer-v2:widget-action-creator Widget (opens new window) AdditionalAction.addAction DataEvents.annotationUpdated / AnnotUpdatedType.additionalActionDataUpdated 复合组件 允许用户选择不同的触发方式和动作类型，以便为表单域添加新的动作
form-designer-v2:widget-action-tree Widget (opens new window) moveActionOrder / updateAction / AdditionalAction.updateActionData
/ removeAction / AdditionalAction.removeAction		 DataEvents.annotationUpdated /
AnnotUpdatedType.actionDataUpdated / AnnotUpdatedType.additionalActionDataUpdated		 复合组件 展示表单域的动作列表，并允许用户对选中的动作进行移动、编辑和删除操作

# 表单组合框、列表框共用属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:combo-list-box-item-list-selector PDFFormField (opens new window) setOptions / deleteOptions / insertOption / addOption / updateOption
/ getOptionsSize / moveOption / selectOption		 DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.CHOICE_OPTION_ITEMS 列表框 展示 Combo Box 或者 List Box 的选项列表，也可以设置当前选中项。配合
form-designer-v2:combo-list-box-item-editor，form-designer-v2:combo-list-box-add-item-button，form-designer-v2:combo-list-box-export-value-editor，
form-designer-v2:combo-list-box-delete-item-button，form-designer-v2:combo-list-box-move-item-up-button,form-designer-v2:combo-list-box-move-item-down-button
组件使用，可以编辑、添加、删除、移动 Combo Box 或者 List Box 的选项
form-designer-v2:combo-list-box-item-editor PDFFormField (opens new window) updateOption DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.CHOICE_OPTION_ITEMS 输入框 向 Combo Box 或 List Box 添加选项，同时也可以编辑已选中的选项
form-designer-v2:combo-list-box-add-item-button PDFFormField (opens new window) addOption ... 按钮 向 Combo Box 或 List Box 添加选项， 需要配合 form-designer-v2:combo-list-box-item-editor 和 form-designer-v2:combo-list-box-export-value-editor 组件使用
form-designer-v2:combo-list-box-export-value-editor PDFFormField (opens new window) addOption / updateOption ... 输入框 设置 Combo Box 或者 List Box 选项的导出值， 需要配合 form-designer-v2:combo-list-box-item-editor 和 form-designer-v2:combo-list-box-add-item-button 组件使用
form-designer-v2:combo-list-box-delete-item-button PDFFormField (opens new window) deleteOption ... 按钮 删除当前选中的 Combo Box 或者 List Box 的选项
form-designer-v2:combo-list-box-move-item-up-button PDFFormField (opens new window) moveOption ... 按钮 移动当前选中的 Combo Box 或者 List Box 的选项
form-designer-v2:combo-list-box-move-item-down-button PDFFormField (opens new window) moveOption ... 按钮 移动当前选中的 Combo Box 或者 List Box 的选项

# 表单组合框、文本框共用属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:widget-format-category-selector PDFFormField (opens new window) setFormatAction / removeFormatAction / getFormatActionInfo DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FORMAT_ACTION 下拉框 设置 Text Field 和 Combo Box 的显示格式， 需要 form-designer-v2:custom-format-options, form-designer-v2:number-format-options, form-designer-v2:date-format-options,
form-designer-v2:percentage-format-options, form-designer-v2:special-format-options, form-designer-v2:time-format-options 配合使用
form-designer-v2:custom-format-options
form-designer-v2:number-format-options
form-designer-v2:date-format-options
form-designer-v2:percentage-format-options
form-designer-v2:special-format-options
form-designer-v2:time-format-options		 PDFFormField (opens new window) ... ... 复合组件 编辑 Text Field 和 Combo Box 的不同显示格式的详细配置。这些组件的显示或隐藏需要根据 form-designer-v2:widget-format-category-selector 所选的格式类型进行控制
form-designer-v2:widget-format-category-tip - - - 静态文本 根据 form-designer-v2:widget-format-category-selector 所选的格式类型显示不同的提示信息
form-designer-v2:validation-action-editor PDFFormField (opens new window) setValidateAction / getValidateActionInfo DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.VALIDATE_ACTION 复合组件 配置 Text Field 和 Combo Box 的校验规则
form-designer-v2:calculate-action-editor PDFFormField (opens new window) setCalculateAction / getCalculateActionInfo DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.CALCULATE_ACTION 复合组件 配置 Text Field 和 Combo Box 的计算规则

# 表单单选框、复选框共用属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:normal-caption-selector Widget (opens new window) setNormalCaption / getNormalCaption DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetNormalCaptionUpdated 下拉框 设置 Radio Button 和 Check Box 的按钮样式
form-designer-v2:export-value-editor Widget (opens new window) setExportValue / getExportValue DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetExportValueUpdated 输入框 设置 Radio Button 和 Check Box 的导出值
form-designer-v2:checked-by-default-checkbox PDFFormField (opens new window) setCheckedByDefault / isCheckedByDefault DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.CHECKED_BY_DEFAULT 复选框 设置 Radio Button 和 Check Box 是否默认被选中

# 表单按钮属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:push-button-layout-selector Widget (opens new window) setIconCaptionRelation / getIconCaptionRelation DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetIconCaptionRelationUpdated 下拉框 设置 Push Button 的图标和文字的显示布局
form-designer-v2:push-button-show-icon-fit-dialog-button Widget (opens new window) setIconFitOptions / getIconFitOptions - 按钮 点击后打开 form-designer-v2:icon-fit-dialog 对话框
form-designer-v2:icon-fit-dialog Widget (opens new window) setIconFitOptions / getIconFitOptions - 对话框 设置 Push Button 的图标缩放方式
form-designer-v2:push-button-behavior-selector Widget (opens new window) setHighlightingMode / getHighlightingMode DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetHighlightingModeUpdated 下拉框 设置 Push Button 在鼠标按下后的高亮模式
form-designer-v2:push-button-caption-editor Widget (opens new window) setMKCaption / getMKCaptionOptions DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetCaptionUpdated 输入框 设置 Push Button 在不同状态下显示的文本，其 "状态" 由 form-designer-v2:push-button-icon-caption-position-selector 组件决定
form-designer-v2:push-button-icon-editor Widget (opens new window) setMKIcon / removeMKIcon / getMKIcon / getMKIconOptions DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetIconUpdated - 用于预览和修改 Push Button 不同状态（包括鼠标按下、抬起和移入）下的图标, 其状态由 form-designer-v2:push-button-icon-caption-position-selector 组件指定，需要搭配两个组件使用
form-designer-v2:push-button-icon-caption-position-selector Widget (opens new window) - - 选择框 和 form-designer-v2:push-button-caption-editor、form-designer-v2:push-button-icon-editor 组件一起使用，用于指定 Push Button 的不同状态 (包括鼠标按下、抬起和移入)。
form-designer-v2:push-button-caption-editor和form-designer-v2:push-button-icon-editor 则用于设置对应状态下的文本和图标

# 表单文本框属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:text-field-alignment-selector Widget (opens new window) setAlignment / getAlignment DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetAlignmentUpdated 下拉框 设置 Text Field 的文本对齐方式
form-designer-v2:text-field-default-value-editor PDFFormField (opens new window) setDefaultValue / getDefaultValue DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.DEFAULT_VALUE 输入框 设置 Text Field 的默认值
form-designer-v2:text-field-scroll-long-text-checkbox PDFFormField (opens new window) describeFieldFlags / updateFlagByOptions / setFlags / getFlags DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 滚动显示长文本：当 Text Field 字号设置为固定数值，并且内容长度超出文本框大小时，是否需要通过移动光标自动滚动文本内容以显示全部文本
form-designer-v2:text-field-max-length-editor PDFFormField (opens new window) describeFieldFlags / updateFlagByOptions / setFlags / getFlags DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 + 输入框 设置是否对 Text Field 的文本长度进行限制，并可以设定最大长度限制
form-designer-v2:text-field-password-checkbox PDFFormField (opens new window) describeFieldFlags / updateFlagByOptions / setFlags / getFlags DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 设置 Text Field 是否为密码框。开启此项后，不允许设置拼写检查、文本组合以及多行输入
form-designer-v2:text-field-check-spelling PDFFormField (opens new window) describeFieldFlags / updateFlagByOptions / setFlags / getFlags DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 设置 Text Field 是否开启拼写检查。开启此项后，不允许设置为密码框
form-designer-v2:text-field-comb-of-editor PDFFormField (opens new window) describeFieldFlags / updateFlagByOptions / setFlags / getFlags DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 + 输入框 设置 Text Field 为组合输入框，并设定组合的字符数。开启此项后，其他项将不可用，包括滚动显示长文本、限制文本长度、密码框、拼写检查以及多行输入
form-designer-v2:text-field-multiline-checkbox PDFFormField (opens new window) describeFieldFlags / updateFlagByOptions / setFlags / getFlags DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 + 输入框 设置 Text Field 为多行输入框。开启此项后，Text Field 将不能设置为密码框和多行输入框

# 表单组合框属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:combo-box-edit-checkbox PDFFormField (opens new window) updateFlagByOptions DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 设置 Combo Box 是否允许编辑

# 表单列表框属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:list-box-multille-selection-checkbox PDFFormField (opens new window) updateFlagByOptions DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS 复选框 设置 List Box 是否允许多选

# 表单单选框属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:radio-button-unison-checkbox PDFFormField (opens new window) updateFlagByOptions / describeFieldFlags DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.FLAGS 复选框 设置 Radio Button 是否同时选中具有相同名称和值的单选框

# 表单签名属性编辑组件

组件 目标对象 关联 API 变更事件
AnnotUpdatedType
/FormFieldPropertyName		 组件类型 说明
form-designer-v2:signed-action-editor PDFSignature (opens new window) setMDPAction / getMDPAction DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.SIGNATURE_MDP_ACTION 复合组件 编辑签名字段的 MDP 配置

基于以上内置表单属性编辑组件，开发者能够快速地实现定制表单属性编辑的用户界面布局。为了帮助您更好地理解，您可以参考以下示例来获取更多信息：</examples/UIExtension/form-properties-editor/index.html>。

# 版本兼容性

最低支持版本：Foxit PDF SDK for Web 11.0.0

← 动作（Action） →