Orbeon Forms：如何在动作中修改文本框及说明文本框背景色

要在Orbeon Forms的动作（Action）中修改控件背景色，可通过Run JavaScript类型的动作实现，以下是具体操作：

一、修改文本框（Text Box）的背景颜色 #

1. 在表单编辑器中添加「Run JavaScript」动作，设置好触发条件（如按钮点击、值变更等）。
2. 写入以下代码（替换你的文本框绑定名为实际控件的绑定名称）：

   // 获取目标文本框的DOM元素
   const textbox = ORBEON.util.Dom.getControlElementByName('你的文本框绑定名');
   if (textbox) {
       // 设置背景色，示例为浅黄色
       textbox.style.backgroundColor = '#fff3cd';
   }
   

二、修改说明文本框的背景颜色 #

说明文本框分两种场景，对应不同的处理方式：

场景1：控件自带的说明提示（Hint） #

如果是文本框下方的说明提示，可通过关联控件找到提示元素：

const textbox = ORBEON.util.Dom.getControlElementByName('关联的文本框绑定名');
// 获取提示元素
const hintElement = textbox?.parentElement.querySelector('.xforms-hint');
if (hintElement) {
    // 设置背景色，示例为浅灰色
    hintElement.style.backgroundColor = '#e9ecef';
}

场景2：独立的说明文本控件（Note） #

如果是单独添加的Note类型说明控件，直接获取其DOM元素修改：

const noteElement = ORBEON.util.Dom.getControlElementByName('你的说明控件绑定名');
if (noteElement) {
    // 设置背景色，示例为浅蓝色
    noteElement.style.backgroundColor = '#d1ecf1';
}

注意事项 #

• 控件绑定名可在表单编辑器的「控件设置」中查看（通常是bind属性的值）。
• 若DOM选择器不生效，可通过浏览器开发者工具查看元素的类名或ID，调整代码中的选择逻辑。

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