html - Orbeon Forms 中的只读字段行为

Question

Orbeon Forms 中的字段只读行为存在问题。我们通常在绑定(bind)定义中写条件来告诉一个字段什么时候应该是只读的，所以当条件满足时，表单(HTML浏览器)上的字段将不可编辑。

但是，在该字段的 HTML 页面源代码中，我们看到该字段包含属性 disabled="disabled"而不是 readonly="readonly"。由于属性 disabled="disabled"，输入字段中的数据将显示为灰色(IE 浏览器，windows 默认外观)并且看起来模糊/暗淡，因此无法正确查看。 此外，我们不能通过禁用字段的 css 属性更改输入数据的颜色，但我们可以为具有属性 readonly="readonly"的字段更改颜色。

所以问题是当我们在 Orbeon 代码的绑定(bind)定义中说 readonly="true"时，是否有可能在 HTML 浏览器上将属性作为 readonly="readonly"而不是 disabled="disabled"获取

示例 Orbeon 代码和 HTML 页面源快照如下

<xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
    xmlns:f="http://orbeon.org/oxf/xml/formatting"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    >

    <xhtml:head>
        <xforms:model xmlns:xforms="http://www.w3.org/2002/xforms"
                xmlns:xs="http://www.w3.org/2001/XMLSchema" id="main-model">

          <xforms:instance id="form-instance">
            <form>
              <field-1></field-1>
              <field-2></field-2>
              <field-3></field-3>
            </form>
          </xforms:instance>

          <xforms:instance id="form-attributes">
            <attributes>
                <summary>false</summary>
            </attributes>
          </xforms:instance>

          <xforms:bind id="summary" nodeset="instance('form-attributes')/summary" />
          <xxforms:variable name="summary" select="instance('form-attributes')/summary" />

          <xforms:bind nodeset="instance('form-instance')" readonly="$summary='true'" />

          <xforms:bind id="field-1" nodeset="instance('form-instance')/field-1" />
          <xforms:bind id="field-2" nodeset="instance('form-instance')/field-2" />
          <xforms:bind id="field-3" nodeset="instance('form-instance')/field-3" />

        </xforms:model>
    </xhtml:head>

    <xhtml:body>

      <table>
        <tr>
            <td>
                <xforms:trigger appearance="minimal" id="readonly-view">
                    <xforms:label>Readonly View</xforms:label>
                    <xforms:action ev:event="DOMActivate">
                        <xforms:setvalue bind="summary" value="'true'" />
                    </xforms:action>
                </xforms:trigger>
            </td>
            <td>
                <xforms:trigger appearance="minimal" id="editable-view">
                    <xforms:label>Editable View</xforms:label>
                    <xforms:action ev:event="DOMActivate">
                        <xforms:setvalue bind="summary" value="'false'" />
                    </xforms:action>
                </xforms:trigger>
            </td>
        </tr>
        <tr>
            <td>
                Field 1: 
            </td>
            <td>
                <xforms:input bind="field-1" id="field-1-id" xxforms:maxlength="10" /> 
            </td>
        </tr>
        <tr>
            <td>
                Field 2: 
            </td>
            <td>
                <xforms:input bind="field-2" id="field-2-id" xxforms:maxlength="10" /> 
            </td>
        </tr>
        <tr>
            <td>
                Field 3: 
            </td>
            <td>
                <xforms:input bind="field-3" id="field-3-id" xxforms:maxlength="10" /> 
            </td>
        </tr>
      </table>

    </xhtml:body>
</xhtml:html>

HTML 页面源代码快照:

Answer 1

此时，正如您所注意到的，Orbeon Forms 在只读表单字段上生成 disabled="disabled"，而不是 readonly="readonly"，这不能在不更改 Orbeon Forms 的情况下进行更改。

您的问题的可能解决方案是使用 static appearance for read-only controls ，它只显示字段的值，其方式类似于 xf:output 会执行的操作，而不是只读表单字段。这通常对于非常轻松地创建评论页面非常有用，您可以在其中向用户显示他们在提交之前输入的所有值。