这段代码主要是为了实现复制按钮的功能,但是存在一些潜在的bug:

  1. 如果页面没有id为"chatgpt-response"的元素,那么responseTextarea将为null,会导致后面的代码出错。
  2. 在事件监听中使用了event.preventDefault(),但是并没有对复制事件进行阻止,这可能导致复制操作被阻止而不能成功复制。
  3. 在复制成功后,只是在控制台输出了"复制成功!",但是没有给用户任何提示。

以下是修改后的代码:

<button id="copy-button" class="refresh-button">复制</button>
<script>
const copyButton = document.getElementById('copy-button');
const responseTextarea = document.getElementById('chatgpt-response');

if (responseTextarea) {
  copyButton.addEventListener('click', () => {
    responseTextarea.select();
    document.execCommand('copy');
    showCopySuccess(); // 添加复制成功提示
  });

  // 检测浏览器是否支持 execCommand
  if (!document.queryCommandSupported('copy')) {
    copyButton.style.display = 'none';
  }

  // 添加复制成功提示
  function showCopySuccess() {
    const successMessage = document.createElement('div');
    successMessage.innerText = '复制成功!';
    successMessage.style.position = 'fixed';
    successMessage.style.top = '10px';
    successMessage.style.right = '10px';
    successMessage.style.backgroundColor = '#4CAF50';
    successMessage.style.color = 'white';
    successMessage.style.padding = '10px';
    successMessage.style.borderRadius = '5px';
    document.body.appendChild(successMessage);
    setTimeout(() => {
      successMessage.remove();
    }, 2000);
  }

  responseTextarea.addEventListener('copy', (event) => {
    // 阻止默认行为
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData('text/plain', responseTextarea.value);
    }
  });
}
</script>

修改后的代码解决了上述的三个问题,同时增加了复制成功后的提示,让用户能够更加友好地使用此功能。

检测bug button id=copy-button class=refresh-button复制buttonscriptconst copyButton = documentgetElementByIdcopy-button;const responseTextarea = documentgetElementByIdchatgpt-response;copyButtonaddEventLis

原文地址: https://www.cveoy.top/t/topic/14y 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录