JS实现一键点击按钮复制文本

简介: 【5月更文挑战第6天】JS实现一键点击按钮复制文本

背景描述

现在有这样一个需求,想要在页面实现点击按钮,一键复制指定列表字段内容的操作,就像这样的效果

image.png

复制成功之后的内容在Notepad++ 粘贴可以看到

image.png

正式列表中链接地址字段的内容,那么如何实现一键点击按钮复制指定列字段内容的操作呢,下面我们来看具体的页面代码实现。

JS代码实现

首先来看页面按钮点击事件对应的方法

image.png

在点击 复制链接 按钮时需要传入您想要复制的字段内容,这里通过 row.url 取值 copylink() 方法内容如下

function copylink(url) {
      var flag = copyText(url);
      if (flag) {
        $.modal.alertSuccess("复制成功!");
      }else {
        $.modal.alertSuccess("复制失败!");
      }
    }

这里我们用到了一个 copyText() 方法,下面来看我们这个方法的详细实现,里面每一行代码我都做了注释,方便阅读

    /**
     * 复制文本到剪贴板
     * @param {string} text 需要被复制的文本
     * @returns {boolean} 如果复制成功返回true,否则返回false
     */
    function copyText(text) {
      // 创建一个隐藏的textarea元素
      var textarea = document.createElement("textarea");
      // 保存当前焦点元素
      var currentFocus = document.activeElement;
      // 将textarea添加到body中
      document.body.appendChild(textarea);
      // 设置textarea的值为传入的文本
      textarea.value = text;
      // 让textarea获得焦点
      textarea.focus();
      // 为textarea设置选择范围,兼容性处理
      if (textarea.setSelectionRange){
        textarea.setSelectionRange(0, textarea.value.length);
      } else {
        textarea.select();
      }
      // 尝试执行复制命令
      try {
        var flag = document.execCommand("copy");
      } catch(eo){
        var flag = false;
      }
      // 移除textarea元素
      document.body.removeChild(textarea);
      // 将焦点返回之前的元素
      currentFocus.focus();
      // 返回复制是否成功
      return flag;
    }

这个代码其实比较容易理解,基本上就是先创建一个隐藏的textarea元素,然后再将传入的文本设置为textarea的值,最后执行复制命令就可以了。大家有需要的可以放心拿去用,这里我已经验证过是好用的。

相关文章
|
1月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
2天前
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
2天前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
4天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
6 0
|
10天前
|
JavaScript 前端开发
JavaScript 计算颜色的相对亮度,并确定相应的文本颜色
JavaScript 计算颜色的相对亮度,并确定相应的文本颜色
8 0
|
18天前
|
JavaScript 前端开发
JavaScript实现点击鼠标弹钢琴的效果
JavaScript实现点击鼠标弹钢琴的效果
|
1月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
24 0
|
1月前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
149 63