如何用<input type="button">通过JS复制<p>内的加密解密结果？

直接用现代浏览器支持的navigator.clipboard.writeText() API即可，按钮类型是<input>还是<button>不影响核心逻辑，只需给按钮绑定点击事件，获取目标文本后调用剪贴板方法。

示例代码：

<!-- HTML结构 -->
<textarea id="inputText">输入文本</textarea>
<p id="result">加密/解密结果</p>
<input type="button" value="复制结果" id="copyBtn">

<script>
// JS逻辑
const copyBtn = document.getElementById('copyBtn');
const resultEl = document.getElementById('result');

copyBtn.addEventListener('click', async () => {
  try {
    const textToCopy = resultEl.textContent.trim();
    if (!textToCopy) {
      alert('没有可复制的内容');
      return;
    }
    await navigator.clipboard.writeText(textToCopy);
    alert('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制失败，请手动复制');
  }
});
</script>

说明：

• async/await用于处理剪贴板API的异步返回结果，避免回调嵌套
• 先判断文本是否为空，防止无效复制操作
• 捕获错误处理兼容性问题（比如非HTTPS环境下部分浏览器会禁用剪贴板API）

常见原因： #

1. 浏览器默认样式优先级更高：浏览器自带的button默认样式（边框、背景、内边距等）会覆盖自定义样式
2. CSS选择器优先级不足：自定义样式的选择器被其他更高优先级规则（如带类名/ID的选择器、内联样式）覆盖
3. 选择器书写错误：类名/ID拼写错误，或按钮未绑定对应样式的类
4. 属性冲突：比如background被background-color覆盖，border被细分属性（border-width等）覆盖

解决办法： #

1. 重置默认样式：先清除浏览器默认样式，再添加自定义样式

/* 重置button默认样式并自定义 */
.delete-btn {
  margin: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #ff4444;
  color: #fff;
  cursor: pointer;
  /* 可选：移除默认聚焦轮廓 */
  outline: none;
}
/* 可选：添加交互状态样式 */
.delete-btn:hover {
  background: #cc0000;
}

对应HTML：

<button class="delete-btn">删除文本</button>

2. 提升选择器优先级：若存在样式覆盖，使用更具体的选择器，比如#app .delete-btn或给按钮添加ID用#deleteBtn
3. 排查样式覆盖：打开浏览器开发者工具（F12），选中按钮元素查看「Styles」面板，若自定义样式被划掉，说明有更高优先级规则，需调整选择器或修改属性
4. 谨慎使用!important：临时应急可添加!important强制生效（如background: #ff4444 !important;），但不推荐长期使用，会增加样式维护难度

内容的提问来源于stack exchange，提问作者Retablo Autómata