如何用原生JavaScript将AEM Touch UI文本域内容复制到HTML表单并提交

我来帮你搞定这个问题，原生JS其实也很直接，核心就是通过DOM操作获取AEM Touch UI里的内容，然后在表单提交时同步到HTML表单再提交。下面是具体的实现步骤和代码示例：

1. 定位关键DOM元素 #

首先你需要准确找到AEM Touch UI中的文本域，以及你的HTML表单和对应的输入框。AEM Touch UI的表单元素通常带有coral-Form-field类，或者有特定的name属性（对应你在AEM组件里配置的字段名）。你可以用document.querySelector或getElementById来定位：

// 替换成你AEM Touch UI文本域的实际选择器（比如name属性或类名）
const aemTextField = document.querySelector('.coral-Form-field[name="your-aem-field-name"]');
// 替换成HTML表单输入框的ID
const htmlFormInput = document.getElementById('html-form-input');
// 替换成你的HTML表单ID
const targetForm = document.getElementById('target-html-form');

2. 监听表单提交事件并处理同步 #

接下来，给HTML表单的提交事件绑定处理函数：先阻止默认的提交行为，把AEM文本域的内容同步到HTML表单输入框，最后手动提交表单。

if (targetForm && aemTextField && htmlFormInput) {
  targetForm.addEventListener('submit', function(e) {
    // 阻止默认提交流程，先完成内容同步
    e.preventDefault();
    
    // 将AEM中已编辑的内容赋值给HTML表单的输入框
    htmlFormInput.value = aemTextField.value;
    
    // 手动触发表单提交
    targetForm.submit();
  });
}

注意事项 #

• 选择器准确性：一定要确认AEM Touch UI文本域的选择器是否正确，你可以通过浏览器开发者工具的元素审查功能来获取准确的选择器。
• 边界情况处理：代码里加了元素存在性判断，避免因为DOM元素未加载或不存在导致的报错。
• AEM组件特殊情况：如果你的AEM文本域是特殊的CUI组件（比如富文本编辑器），可能需要通过组件的API获取内容，而不是直接取value属性。比如富文本编辑器的内容通常存在于内部的iframe或特定元素中，这时候需要调整获取内容的方式。

内容的提问来源于stack exchange，提问作者Ajay