您的当前位置:首页JS怎么复制内容到剪贴板
广告

JS怎么复制内容到剪贴板

2023-11-30 来源:吉希宠物网

包: npm install clipboard --save ,然后 import Clipboard from 'clipboard';

使用

从输入框复制现在页面上有一个 <input> 标签,我们需要复制其中的内容,我们可以这样做:

<input id="demoInput" value="hello world"><button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard';const btnCopy = new Clipboard('btn');

注意到,在 <button> 标签中添加了一个 data-clipboard-target 属性,它的值是需要复制的 <input>id,顾名思义是从整个标签中复制内容。

直接复制

有的时候,我们并不希望从 <input> 中复制内容,仅仅是直接从变量中取值。如果在 Vue 中我们可以这样做:

<button class="btn" :data-clipboard-text="copyValue">点我复制</button>

import Clipboard from 'clipboard';const btnCopy = new Clipboard('btn');this.copyValue = 'hello world';

事件

有的时候我们需要在复制后做一些事情,这时候就需要回调函数的支持。

在处理函数中加入以下代码:

// 复制成功后执行的回调函数clipboard.on('success', function(e) { console.info('Action:', e.action); // 动作名称,比如:Action: copy console.info('Text:', e.text); // 内容,比如:Text:hello word console.info('Trigger:', e.trigger); // 触发元素:比如:<button class="btn" :data-clipboard-text="copyValue">点我复制</button> e.clearSelection(); // 清除选中内容});// 复制失败后执行的回调函数clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});

小结

文档中还提到,如果在单页面中使用 clipboard ,为了使得生命周期管理更加的优雅,在使用完之后记得 btn.destroy() 销毁一下。

clipboard 使用起来是不是很简单。但是,就为了一个 copy 功能就使用额外的第三方库是不是不够优雅,这时候该怎么办?那就用原生方法实现呗。

document.execCommand()方法

先看看这个方法在 MDN 上是怎么定义的:

which allows one to run commands to manipulate the contents of the editable region.

意思就是可以允许运行命令来操作可编辑区域的内容,注意,是可编辑区域。

定义

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

方法返回一个 Boolean 值,表示操作是否成功。

  • aCommandName :表示命令名称,比如: copy, cut 等(更多命令见命令);

  • aShowDefaultUI:是否展示用户界面,一般情况下都是 false;
  • aValueArgument:有些命令需要额外的参数,一般用不到;
  • 兼容性

    这个方法在之前的兼容性其实是不太好的,但是好在现在已经基本兼容所有主流浏览器了,在移动端也可以使用。

    使用

    从输入框复制现在页面上有一个 <input> 标签,我们想要复制其中的内容,我们可以这样做:

    <input id="demoInput" value="hello world"><button id="btn">点我复制</button>

    js代码

    const btn = document.querySelector('#btn');btn.addEventListener('click', () => {const input = document.querySelector('#demoInput');input.select();if (document.execCommand('copy')) {document.execCommand('copy');console.log('复制成功');}})

    其它地方复制

    有的时候页面上并没有 <input> 标签,我们可能需要从一个 <p> 中复制内容,或者直接复制变量。

    还记得在 execCommand() 方法的定义中提到,它只能操作可编辑区域,也就是意味着除了 <input>、<textarea> 这样的输入域以外,是无法使用这个方法的。

    这时候我们需要曲线救国。

    <button id="btn">点我复制</button>

    js代码

    const btn = document.querySelector('#btn');btn.addEventListener('click',() => {const input = document.createElement('input');document.body.appendChild(input); input.setAttribute('value', '听说你想复制我');input.select();if (document.execCommand('copy')) {document.execCommand('copy');console.log('复制成功');} document.body.removeChild(input);})

    算是曲线救国成功了吧。在使用这个方法时,遇到了几个坑。

    遇到的坑

    在Chrome下调试的时候,这个方法时完美运行的。然后到了移动端调试的时候,坑就出来了。

    对,没错,就是你,ios。。

    1、点击复制时屏幕下方会出现白屏抖动,仔细看是拉起键盘又瞬间收起

    知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘,那就是聚焦到了输入域,那只要让输入域不可输入就好了,在代码中添加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的,就不会拉起键盘了。

    2、无法复制

    这个问题是由于 input.select() 在ios下并没有选中全部内容,我们需要使用另一个方法来选中内容,这个方法就是 input.setSelectionRange(0, input.value.length);。

    完整代码如下:

    const btn = document.querySelector('#btn');btn.addEventListener('click',() => {const input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); input.setAttribute('value', 'hello world'); document.body.appendChild(input);input.setSelectionRange(0, 9999);if (document.execCommand('copy')) {document.execCommand('copy');console.log('复制成功');} document.body.removeChild(input);})

    相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

    推荐阅读:

    angularjs中获取单选按钮的方法

    脚本加载后执行JS回调函数的方法

    小编还为您整理了以下内容,可能对您也有帮助:

    js将字符串写入系统剪切板的方法

    利用一个不可见input,将要复制的文本写入value,再执行setSelectionRange选中,然后执行document.execCommand('copy')将value写入系统剪切板。

    js将内容放到剪贴板怎么写呢?

    <input type="text" id="copyText" value="" style="color:#fff; background:#fff; border-color:#fff;border: 0; position:absolute; top:-50px; left:0;" />
    <script type="text/jscript">
    //复制文本
    function copyText(str)
    {
    if(str.length >0)
    {
    $("#copyText").val(str);
    //复制文本
    var input = document.getElementById("copyText");
    input.value = str; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    //layer提示框
    layer.closeAll('msg',{time:10000});
    layer.msg('<span style="color:red;">已复制:</span></br>'+str);
    }
    }
    </script>
    <a href="jscript:copyText('要复制的内容')">要复制的内容</a>
    这是代码,这里的文本框不能设置隐藏,否则复制失效,所以我设置的样式让它在浏览器之外的地方,无法被看到

    js将内容放到剪贴板怎么写呢?

    <input type="text" id="copyText" value="" style="color:#fff; background:#fff; border-color:#fff;border: 0; position:absolute; top:-50px; left:0;" />
    <script type="text/jscript">
    //复制文本
    function copyText(str)
    {
    if(str.length >0)
    {
    $("#copyText").val(str);
    //复制文本
    var input = document.getElementById("copyText");
    input.value = str; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    //layer提示框
    layer.closeAll('msg',{time:10000});
    layer.msg('<span style="color:red;">已复制:</span></br>'+str);
    }
    }
    </script>
    <a href="jscript:copyText('要复制的内容')">要复制的内容</a>
    这是代码,这里的文本框不能设置隐藏,否则复制失效,所以我设置的样式让它在浏览器之外的地方,无法被看到

    html5+js,如何实现,复制到剪切板?

    可用JS。

    方法一:只对IE有效:<script>function copyToClipboard() { var d = document.all("source").value; window.clipboardData.setData('text', d); } </script><button onclick="copyToClipboard();">拷贝</button> <input type="text" size=20 id="source" value="测试数据"><button onclick="alert(window.clipboardData.getData('text'));">显示</button> <button onclick="window.clipboardData.clearData('text');">清空</button>

    对于直接复制是一个很危险的操作,为了安全谷歌和其他浏览器都做了阻止,除了出来IE这种垃圾浏览器以外。目前网上的都是借助flash来达到兼容,其他的方法还真没见过。另外html5当然以谷歌内核为主:有条报道:Chrome doesn't do document.execCommand('copy') since October 2010.

    虽然2010年后谷歌就不允许使用上述方法进行复制了,但是以提醒的方法来做:

    function copyToClipboard(text) {  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}

    js实现网页内自定义粘贴板

      很酷吧,相信经常在网上复制粘贴的人应该不陌生,我也是经历过,觉得很神奇,所以就寻思着是不是也在自己的博客里面也实现这个功能,经过一番查资料于研究,我总算弄明白了其中的原委,并实际应用于我的博客,你可以复制我粘贴试试,觉得酷的话就可以往下接着看了!下面来看一下实现过程。这里说明一下,浏览器版本较低的话可能`addEventListener()`不支持,特别是IE浏览器,IE8以前包括IE8的版本都不支持此方法。

        当用户选中某段内容时window.getSelection()获取一个Selection对象,将这个`objSelection.tostring()`,就是选中区的内容,这里可以用` var selectionString = window.getSelection().toString()`在控制台查看,能在控制台查看说明我们就可以通过js获取到,selectionString + '自定义内容',到这里复制的原内容我们就有了。这里我们要创建一个DOM容器来存`objSelection.tostring()`,最好是可以换行的,如p、div、textarea等。

      当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素,这里主要用其中的copy命令来实现复制功能,听说插件Clipboard.js也是调用这个方法实现复制功能的`bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)`,第一个参数是命令的名称,字符串类型,后两个参数我们可以不用,返回bool值,如果是 false则表示操作不被支持或未被启用命令只介绍用到的copy命令:

      > copy:拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。

      这是很重要的一步,这是复制内容的关键命令。这里我们只需要在正确的时间执行`document.execCommand('copy')`即可。

      addEventListener()方法用于向指定元素添加事件句柄,这里我就抛开文档,就针对本次功能对这个HTML DOM方法进行通俗的解释了,这里主要用来规定我们自定义复制功能的有效DOM范围,来个例子:

      //body中有<div id="test">content</div>

      var el = document.getElementById('test');

      el.addEventListener('copy', function (e){

        // 触发copy事件后的处理

      }

      这个例子中我们实现的功能将只在id为test的DOM元素里有效,其它地方将恢复默认复制功能。

        Range表示包含节点和部分文本节点的文档片段。用`var range = document.createRange()`方法创建,这里面为什么要创建Range呢,主要是用来存储Selection对象的开始位置和终点位置,因为我们是要阻止默认的copy事件,让copy的内容是用户选中的内容加上我们自定义的内容,再将这个内容放入粘贴板,形成最终的粘贴内容。`document.createRange`得到是还没有放内容的片段,我们我们还会用到`Range.setStart()`设置Range的起点和`Range.setEnd()`设置Range的终点。最终`selectionObj.removeAllRanges()`将selectionObj中的默认Range 去掉,`selectionObj.addRange(range)`,粘贴板就有了,不出意外去粘贴就会有选中的内容加自定义的内容了。

    源码可以联系作者。这里有个特别注意的点,如果是原生js的话直接调用函数就可以,如果是vuejs的话图片中可以看到,我是在mounted()钩子函数里调用,而不是在created()钩子函数里调用,这里一定不能在created()钩子函数里调用,为什么呢?

    因为created()执行的时候一般是在html渲染前的操作,此时el还是undefined,所以执行getElementById()就会报错,created()适合做html渲染前的数据初始化工作。而mounted()一般是在html渲染完成后的操作,此时el,data都已经加载完成,一般对dom的操作都写在mounted中,这是个要注意的点,喜欢的话就给作者点个心,谢谢

    吉希宠物网还为您提供以下相关内容希望对您有帮助:

    js将字符串写入系统剪切板的方法

    利用一个不可见input,将要复制的文本写入value,再执行setSelectionRange选中,然后执行document.execCommand('copy')将value写入系统剪切板。

    js将内容放到剪贴板怎么写呢?

    function copyText(str){ if(str.length &gt;0){ ("#copyText").val(str);//复制文本 var input = document.getElementById("copyText");input.value = str; // 修改文本框的内容 input.select(); // 选中文本 d...

    JavaScript如何点击实现复制文字到剪切板呢?

    data-clipboard-target参数指定被复制内容的元素。如上例,点击按钮后会将input的值“被复制的内容”几个字复制到剪切板中。更多使用方法可以自行github查询。

    js 如何实现将div内的内容放到剪切板?

    定义如下JS函数,然后DIV触发onclick 事件就OK。function CopyUrl(){ var htm = document.getElementById("yourdiv").innerHTML;window.clipboardData.setData('text', htm);} yourdiv 就是你的div的ID ...

    JS 实现一键复制功能

    复制是一个使用频率特别高的操作,在网页中,一般可以选中要复制的内容,使用快捷键ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容,我们还可以用JS实现复制,这得益于document的execCommand('copy') 命令...

    javascript如何实现置剪切板文本?

    s); e.preventDefault(); document.oncopy=null; } })(s); document.execCommand('Copy'); }}//用法举例:copyToClipboard("要复制到剪贴板的文字");

    html5+js,如何实现,复制到剪切板?

    方法一:只对IE有效:function copyToClipboard() { var d = document.all("source").value; window.clipboardData.setData('text', d); } 拷贝 显示 清空

    用js实现图片复制到剪切板的功能,兼容各种浏览器,例如IE,火狐、chome...

    拷贝 显示 清空 &lt;/BODY&gt; 您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。

    js 如何将图片文字同时复制到剪切板中

    var img="__PUBLIC__/"+name.getAttribute('src', 2);window.clipboardData.setData("Text",img);alert("复制成功("+img+"),请粘贴");} 下面的image 添加点击事件 &lt;image onclick=show(this) src=...&gt; ...

    js/jQuery怎么自动复制到剪贴板

    出于安全问题,无法使用原生的 JS 或 jQuery 来操作粘贴板。除非使用浏览器扩展(需设置权限),或者使用Flash。某些浏览器允许在文本框内使用 document.execCommand('copy') 与 document.execCommand('paste') 来操作剪贴板。...

    Top