原生 JS 实现复制文本到剪切板

世面上已经有一些比较好用的复制到剪切板的插件,比如 clipboard.js 等,有兴趣的可以去官网看看
本文将讲解如何使用原生 JS 实现复制文本到剪切板,以及分享一些常见问题等,希望能对大家有所帮助

两个API

clipboardData:仅支持使用 IE 内核的浏览器,兼容性不太好
execCommand:该方法允许运行命令来操作可编辑区域(input 和 textarea 等)的内容,支持主流浏览器,是用的比较多的API
由于 clipboardData 兼容性问题,本文将重点放在 execCommand 上

execCommand

语法
bool = document.execCommand(commandName, showDefaultUI, valueArgument)

该方法返回一个布尔值,如果是 false 则表示浏览器不支持或没有启用

参数

commandName:操作命令的名称,命令列表见下文
showDefaultUI:是否展示用户界面,一般为 false(默认值)
valueArgument:有的命令需要额外的参数,比如 insertImage 等,默认为 null

常用命令

copy:拷贝选中内容到剪贴板
cut:剪切选中内容到剪切板
delete:删除选中的内容
paste:在光标位置粘贴剪贴板的内容
更多命令请参考 MDN 官方文档

代码演示

<html>

<head>
  <meta charset="UTF-8">
  <title>Copy to the shear plate</title>
</head>

<body>
  <textarea>lorem ipsum dolor sit amet</textarea>
  <button type="button">复制到剪切板</button>
</body>
<script>
  document.designMode = 'on';
  var textbox = document.getElementsByTagName("textarea");
  var button = document.getElementsByTagName("button");
  var tb = textbox.item(0);
  var bt = button.item(0);

  //将获取的文本复制到剪切板
  bt.onclick = function () {
    // 选择所有文本方法一
    // tb.select();

    // 选择所有文本方法二,该方法也可以选择部分文本
    tb.focus();
    tb.setSelectionRange(0, tb.value.length);

    var bool = document.execCommand('copy');   //复制到剪切板
    if (bool) alert("已将文本复制到剪切板");
    else alert("浏览器不支持或未启用");

    // 打印选择的文本起止索引
    // console.log(tb.selectionStart, tb.selectionEnd);
  };
</script>

</html>

提示

  • 复制选择文本可以使用 select 以及 setSelectionRange 方法,其中 setSelectionRange 支持复制部分选中文本到剪切板
  • execCommand 方法只有在用户手动触发的情况下才会生效,比如代码示例中的 onclick,在触发函数外面调用则会返回 false ,这也是浏览器的一种安全策略
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1002.html
京ICP备19044523号-1