如何用CSS可视化标识将接收粘贴事件的div元素

问题出在原生:focus状态和实际粘贴目标的不匹配——div失去焦点后，用户仍可能通过之前的选中操作触发粘贴，导致视觉标识和实际行为脱节。解决思路是用自定义活跃状态替代单纯依赖原生焦点，明确标记用户选定的粘贴目标：

实现步骤 #

1. 给每个目标div添加自定义类（比如.active-paste-target），用这个类做视觉高亮
2. 通过点击、焦点切换事件维护这个活跃类，确保只有当前选定的div处于高亮状态
3. 可选：限制粘贴事件仅对活跃目标生效，避免误操作

完整代码示例 #

HTML

<div class="paste-target">aaa</div>
<div class="paste-target">bbb</div>

CSS

.paste-target {
  padding: 8px;
  border: 1px solid #ccc;
  margin: 8px 0;
  cursor: pointer;
  user-select: none; /* 可选：防止文本选中干扰视觉标识 */
}

/* 活跃状态的视觉样式 */
.paste-target.active-paste-target {
  border-color: #2196F3;
  background-color: #e3f2fd;
  outline: none; /* 去掉默认焦点框，统一用自定义样式 */
}

JavaScript

const pasteTargets = document.querySelectorAll('.paste-target');

// 切换活跃目标的工具函数
function setActiveTarget(target) {
  pasteTargets.forEach(el => el.classList.remove('active-paste-target'));
  target.classList.add('active-paste-target');
}

pasteTargets.forEach(element => {
  // 点击div时设置为活跃目标
  element.addEventListener('click', () => setActiveTarget(element));

  // 支持tab键切换焦点时更新活跃状态
  element.addEventListener('focus', () => setActiveTarget(element));

  // 粘贴事件处理
  element.addEventListener('paste', event => {
    event.preventDefault();
    const text = (event.clipboardData || window.clipboardData).getData('text');
    const words = text.split(' ').join('\n');
    // 仅允许活跃目标接收粘贴内容
    if (element.classList.contains('active-paste-target')) {
      element.innerText = words;
    }
  });

  // 添加tabindex，支持键盘焦点切换
  element.setAttribute('tabindex', '0');
});

说明 #

• 点击或用tab键选中div时，它会高亮显示，明确告知用户这是当前粘贴目标
• 即使点击页面其他区域，最后选中的div仍保持高亮，避免视觉标识消失但仍能粘贴的混乱
• 限制粘贴仅对活跃目标生效，进一步防止误操作

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