JavaScript

超轻量级php框架startmvc

js+html5实现复制文字按钮

更新时间:2020-05-24 08:30:01 作者:startmvc
本文实例为大家分享了js+html5实现点击复制文字的按钮,供大家参考,具体内容如下图片展

本文实例为大家分享了js+html5实现点击复制文字的按钮,供大家参考,具体内容如下

图片展示:

注意css中的样式,有些页面复制不成功就是没有添加那一句造成的。

代码块


<!DOCTYPE html>
<html lang="en">

 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 </head>

 <style type="text/css">
 *{
 -webkit-user-select: auto;
 }
 </style>

 <body>
 <span id="content">
 你好,好久不见!
 </span>
 <button id="copyBT">复制</button>
 <script>
 function copyArticle(event) {
 const range = document.createRange();
 range.selectNode(document.getElementById('content'));

 const selection = window.getSelection();
 if(selection.rangeCount > 0) selection.removeAllRanges();
 selection.addRange(range);
 document.execCommand('copy');
 alert("复制成功!");
 }

 document.getElementById('copyBT').addEventListener('click', copyArticle, false);
 </script>
 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

js html5 复制文字 按钮