javascript - 在Touch UI cq对话框上禁用文本字段

我想在cq对话框加载时调用JS函数，以验证某个字段是否已经包含某些东西（如果有），请从版本中禁用它。我已经尝试过验证，但是在用户与字段进行交互之后会调用它，因此我需要一种在加载之前进行验证的方法。可能吗？

<id
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
   fieldLabel="ID"
   validation="is_empty" // DO THIS WHEN IS LOADED
   name="./id"
   required="{Boolean}true"/>

最佳答案

我可以想到一种使用cq.authoring.dialog clientlib和jQquery实现此目的的方法


创建类别为cq.authoring.dialog的clientlib。此clientlib中的脚本仅在author instance中加载。
使用granite:class属性将一个类添加到文本字段，这是使用上述clientlib中的脚本连接到文本字段

          <id
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="ID"
            granite:class="readonlySelector"
            name="./id"
            required="{Boolean}true"/>

您必须在dialog.xml中包含以下名称空间才能使用granite:class。
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
注意上面在DOM中注册的类名





使用诸如foundation-contentloaded之类的OOTB花岗石事件监听器之一，在初始化对话框时触发脚本。您可能会使用更窄的事件，请查看granite documentation了解更多事件
使用Coral UI Textfield documentation查找支持的属性。支持disabled和readonly。将此代码放在cq.authoring.dialog clientlib中。

$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
    var $textField = $('.readonlySelector');
    if ($textField.val()) {//truthy check
        $textField.prop('disabled', true);//Greys the field
        $textField.prop('readonly', true);
    }
})

灰显和禁用