JSP自定义控件开发：如何引用当前聚焦元素并设置红色样式？

嘿，作为Pega自定义控件开发的过来人，我一眼就看出你代码里的几个小问题啦😉，先给你拆解问题，再给你适配Pega场景的解决方案：

你的原代码为什么不生效？ #

我先把你踩的坑列出来：

• 错误1：document.getElementById(this)完全用错了：getElementById需要传入元素的ID字符串，但你的元素根本没有id属性（只有class和item-n的类名），而且全局脚本里的this指向的是window对象，不是你要的元素，所以根本找不到目标节点。
• 错误2：red没加引号：JS里设置样式值必须用字符串，red要写成'red'，不然JS会把它当成一个未定义的变量，直接报错。
• 错误3：没处理聚焦事件：你的脚本是直接执行的，根本没有监听元素的focus事件，自然不知道哪个元素处于聚焦状态。

另外还有个隐藏坑：普通div默认不能被聚焦，你得先给元素加tabindex="0"，让它能响应聚焦事件。

适配Pega场景的两种解决方案 #

方案1：全局事件监听（适合批量处理同类型控件） #

因为你有多个item-1、item-2这类同类型元素，用全局监听更高效，而且要等Pega生成DOM后再执行：

// 等Pega生成完DOM再执行，用DOMContentLoaded或者Pega自带的加载事件
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有目标元素
  const focusableElements = document.querySelectorAll('.content-item.content-paragraph');
  
  focusableElements.forEach(el => {
    // 给div加tabindex，让它能被聚焦
    el.setAttribute('tabindex', '0');
    
    // 聚焦时变红
    el.addEventListener('focus', function() {
      this.style.color = 'red';
    });
    
    // 可选：失去焦点时恢复默认颜色
    el.addEventListener('blur', function() {
      this.style.color = '';
    });
  });
});

方案2：直接在控件模板里绑定事件（适合单个控件实例） #

如果你是在Pega的自定义控件HTML模板里写代码，直接给元素加属性更简单，不用写全局脚本：

<div class="content-item content-paragraph item-1 flex" 
     style="" 
     data-ui-meta="{'type':'Cell'}"
     tabindex="0"
     onfocus="this.style.color='red'"
     onblur="this.style.color=''">
  test value
</div>

额外提醒 #

如果Pega项目里有自己的前端框架或者事件绑定规范（比如用pega.ui.util里的方法），优先用官方API，避免直接操作DOM导致和Pega的原生控件冲突，但自定义控件场景下，原生JS是完全没问题的。

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