emoji表情无法进行复制(在js中传递)

html 复制代码
<span id="encoded-emoji"></span>

之前使用的code标签 可能是这个原因导致无法进行复制(复制出来的是变量名字)

下面的是原来的复制函数

javascript 复制代码
function copyToClipboard(text) {
            var textArea = document.createElement("textarea");
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            try {
                var successful = document.execCommand('copy');
                alert('内容已复制到剪切板');
            } catch (err) {
                alert('无法复制到剪切板,请手动复制。');
            }
            document.body.removeChild(textArea);
        }

下面的是修改后的

javascript 复制代码
function copyToClipboard(elementId) {
  // 获取要复制的文本
  var textToCopy = document.getElementById(elementId).textContent;
  // 创建一个临时的textarea元素用于复制
  var textArea = document.createElement("textarea");
  textArea.value = textToCopy;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? '复制成功' : '复制失败';
    alert(msg);
  } catch (err) {
    alert('无法复制');
  }
  // 移除临时textarea元素
  document.body.removeChild(textArea);
}
  • 参数类型

    • 第一个函数接受一个字符串。
    • 第二个函数接受一个元素的 ID。
  • 获取复制内容的方式

    • 第一个函数直接使用传入的字符串。
    • 第二个函数通过元素 ID 来获取页面元素的文本内容。
  • 适用场景

    • 第一个函数适用于您已经有一个字符串,并且想要复制这个字符串到剪贴板的情况。
    • 第二个函数适用于您想要复制页面中某个元素内的文本内容到剪贴板的情况。
  • 复制的内容

    • 第一个函数会复制传入的字符串,包括任何格式化字符,如 emoji。
    • 第二个函数会复制指定元素的 textContent,这通常是纯文本,不包括任何 HTML 标签或样式。如果元素包含 HTML 格式的文本(如 <span><img> 标签),这些标签不会被复制。

在处理 emoji 时,如果 emoji 是以文本形式嵌入的(例如,使用 Unicode 字符),两个函数都应该能够正常工作。但如果 emoji 是以图像或其他非文本元素的形式嵌入的,那么第二个函数可能无法复制它们,因为它只复制文本内容。第一个函数会直接复制包含 emoji 的字符串而非表情。

相关推荐
我是日安4 分钟前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
疯狂的Alex28 分钟前
【C#避坑实战系列文章16】性能优化(CPU / 内存占用过高问题解决)
开发语言·性能优化·c#
象骑士Hack31 分钟前
dev c++工具下载 dev c++安装包下载 dev c++软件网盘资源分享
开发语言·c++
爱泡脚的鸡腿1 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
古夕1 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js
铍镁钙锶钡镭1 小时前
FFmpeg 解封装简单流程
开发语言·ffmpeg·php
拾缘1 小时前
esm和cmj混用报错分析
前端·javascript
古夕1 小时前
技术复盘文档:`resourceLogoUrl` 数据丢失问题分析与最终解决方案
前端·javascript·vue.js
高热度网1 小时前
从 Vercel 构建失败谈 Git 大小写敏感性问题:一个容易被忽视的跨平台陷阱
前端·javascript
青衫旧故1 小时前
Uniapp Vue2 Vue3常量保存及调用
前端·javascript·vue.js·uni-app