div元素能否接收paste事件？如何提示其处于可接收粘贴的聚焦状态

云原生阿岚

2026-10-7

解决方案

核心原因

div属于非交互类元素，默认不具备聚焦能力，因此document.activeElement始终指向body，仅点击后的临时状态能响应粘贴事件。

实现步骤

第一步：给div添加tabindex属性，开启聚焦能力
取值说明：
- 设为tabindex="0"：元素可通过点击和tab键导航获得焦点，适用于需要支持键盘操作的场景
- 设为tabindex="-1"：元素仅可通过点击获得焦点，不会被tab键导航到
第二步：添加聚焦状态样式，给用户明确的可粘贴提示
第三步：可选优化，粘贴事件内阻止默认行为，避免内容被意外插入到div中

代码示例

React 组件代码

<div 
  tabindex="0"
  onPaste={(e) => {
    // 可选：阻止默认粘贴行为
    e.preventDefault()
    console.log(e.clipboardData.getData("Text"))
  }}
  className="paste-area"
>
  点击此处后可粘贴内容
</div>

配套CSS样式

.paste-area {
  padding: 16px;
  min-height: 120px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s;
}

/* 聚焦状态样式，明确提示可粘贴 */
.paste-area:focus {
  outline: none;
  border-color: #1890ff;
  background-color: #f0f8ff;
}

.paste-area:focus::after {
  content: "✅ 当前处于可粘贴状态";
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #1890ff;
}