JS实现一键点击按钮复制文本
  • 背景描述
  • JS代码实现


背景描述

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

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


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

JS实现一键点击按钮复制文本_代码实现_02


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

JS代码实现

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

JS实现一键点击按钮复制文本_字段_03


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

function copylink(url) {
      var flag = copyText(url);
      if (flag) {
        $.modal.alertSuccess("复制成功！");
      }else {
        $.modal.alertSuccess("复制失败！");
      }
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

这里我们用到了一个 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;
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

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