如何使用JavaScript在textarea的placeholder中添加粘贴按钮？

原生<textarea>的placeholder属于浏览器内置渲染的伪元素，无法直接插入可交互的DOM元素，我们可以通过「外层容器包裹+模拟placeholder样式」的方案实现需求，具体实现步骤如下：

• 第一步：嵌套HTML结构，用相对定位的容器包裹textarea、模拟placeholder文本和粘贴按钮

<div class="textarea-wrap">
  <textarea id="countTextarea" rows="6"></textarea>
  <div class="mock-placeholder">
    <span>请输入或粘贴内容统计字数</span>
    <button id="pasteBtn">粘贴</button>
  </div>
</div>

• 第二步：编写CSS样式，实现textarea为空时显示模拟占位符、有内容时自动隐藏的效果，同时保证按钮可交互

.textarea-wrap {
  position: relative;
  width: 400px;
}
#countTextarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
}
/* 模拟placeholder基础样式 */
.mock-placeholder {
  position: absolute;
  left: 10px;
  top: 8px;
  color: #999;
  pointer-events: none; /* 默认不拦截textarea的点击事件 */
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 单独给粘贴按钮开启交互权限 */
.mock-placeholder #pasteBtn {
  pointer-events: auto;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}
/* textarea有内容时隐藏模拟placeholder */
#countTextarea:not(:placeholder-shown) + .mock-placeholder {
  display: none;
}
/* 隐藏原生placeholder避免样式冲突 */
#countTextarea::placeholder {
  opacity: 0;
}

• 第三步：JS调用剪贴板API实现粘贴功能

const pasteBtn = document.getElementById('pasteBtn')
const textarea = document.getElementById('countTextarea')

pasteBtn.addEventListener('click', async () => {
  try {
    // 读取剪贴板文本内容
    const text = await navigator.clipboard.readText()
    textarea.value = text
    // 此处可调用你自身的字数统计逻辑
  } catch (err) {
    console.error('粘贴失败，请检查页面剪贴板权限：', err)
  }
})

该方案兼容所有主流现代浏览器，剪贴板API仅支持在HTTPS协议或者localhost本地开发环境下调用，符合绝大多数生产环境部署要求。如果需要兼容极低版本浏览器，可以额外引入clipboard.js做降级处理。

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