聊天气泡添加复制按钮：适配安卓浏览器及样式美化

在聊天气泡中添加复制按钮：适配安卓浏览器及样式美化

本文将介绍如何在聊天气泡中添加一个复制按钮，实现文本复制功能，并确保该功能在安卓浏览器中正常运行。同时，我们将提供一些 CSS 样式来美化复制按钮。

代码实现

首先，在 addMessage 方法中创建复制按钮并将其插入气泡元素的前面，确保按钮在气泡文本前面显示。

function addMessage(messageText, sender) {
  var messageContainer = document.createElement('div');
  var messageBubble = document.createElement('div');
  var messageBubbleText = document.createElement('span');
  var messageSender = document.createElement('div');
  var messageTime = document.createElement('div');
  var copyButton = document.createElement('button'); // 创建复制按钮

  messageContainer.classList.add('message-container');
  messageBubble.classList.add('message-bubble');
  messageSender.classList.add('message-sender');
  messageTime.classList.add('message-time');
  copyButton.classList.add('copy-button'); // 添加复制按钮样式

  messageBubbleText.innerText = messageText;
  messageSender.innerText = sender;
  messageTime.innerText = new Date().toLocaleString();
  copyButton.innerText = '复制'; // 设置复制按钮文本

  messageBubble.appendChild(copyButton); // 将复制按钮添加到气泡中
  messageBubble.appendChild(messageBubbleText);
  messageContainer.appendChild(messageBubble);
  messageContainer.appendChild(messageSender);
  messageContainer.appendChild(messageTime);
  lastMessageContainer.appendChild(messageContainer);

  // 点击复制按钮时复制文本
  copyButton.onclick = function() {
    if (navigator.userAgent.indexOf('Android') > -1) {
      // 安卓浏览器使用prompt复制
      prompt('长按复制', messageText);
    } else {
      // 其他浏览器使用Clipboard API复制
      navigator.clipboard.writeText(messageText);
    }
  };

  // 注意：这里将气泡里的文本内容加入到了气泡元素中，因此要在气泡元素的前面插入复制按钮。
  lastMessageContainer.querySelector('.message-bubble').innerText += messageText;
}

适配安卓浏览器

安卓浏览器不支持 navigator.clipboard API，因此需要使用 prompt 函数实现复制功能。代码中通过判断用户代理字符串 navigator.userAgent 来区分不同的浏览器类型，并根据不同的浏览器类型使用不同的复制方法。

美化复制按钮

以下 CSS 代码用于美化复制按钮：

.copy-button {
  background-color: transparent;
  color: #007bff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 12px;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.copy-button:hover {
  text-decoration: underline;
}

这段代码将复制按钮设置为透明背景，蓝色文本，并使用一些基本的样式来使其看起来更美观。

总结

通过以上代码，我们成功地在聊天气泡中添加了复制按钮，并使其能够在安卓浏览器中正常工作。此外，我们还提供了美化按钮的 CSS 样式，使按钮看起来更美观。