精华内容
下载资源
问答
  • js复制文本内容
    2022-02-08 11:43:04
    function copyfn(text) {
        var copyInput = document.createElement("input");
        copyInput.setAttribute("value", text);
        document.body.appendChild(copyInput);
        copyInput.select();
        document.execCommand("copy");
        document.body.removeChild(copyInput);
    }

    更多相关内容
  • JS复制内容到剪切板

    2018-01-10 15:18:05
    职称PC端,移动端的复制黏贴,操作剪切板,很多浏览器都支持,具体不支持哪个目前没发现
  • NULL 博文链接:https://z-one.iteye.com/blog/837677
  • Javascript复制实例详解

    2020-10-22 21:38:21
    最近接了个项目,其中有项目需求是这样的,需要复制内容到剪切板,因为有众多浏览器,所以兼容性很重要,下面通过本文给大家介绍Javascript复制实例详解,对js复制相关知识感兴趣的朋友一起学习吧
  • // 执行浏览器复制命令 alert("已复制好,可贴粘。"); } [removed] <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea> <input type="button" o
  • 适用于移动端js实现复制功能,点击按钮,提示“复制成功”,经常用来复制订单编号和快递单号等,避免用户手动输入的麻烦
  • js复制一个数组(浅复制、深复制)

    千次阅读 2022-01-10 17:13:09
    js中,我们经常会用到数组复制,Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其实指向的还是同一个地址,改变一个另一个也会随之改变,很明显这并不是我们想要的 ...

    在js中,我们经常会用到数组复制,Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其实指向的还是同一个地址,改变一个另一个也会随之改变,很明显这并不是我们想要的

      var arr = [1, 2, 3];
      var newArr = arr;
      arr.push(4);
      console.log(newArr1);  // [1, 2, 3, 4]
    

    下面介绍数组的浅复制(适用于数组并不复杂,即数组中没有嵌套对象或者嵌套数组)
    方法一:concat()
    concat()方法用于连接两个或多个数组;
    concat() 方法不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值。

      var arr = [1, 2, 3];
      var newArr = arr.concat();
      arr.push(4);
      console.log(newArr); // [1, 2, 3]
    

    方法二:slice()
    slice() 方法以新的数组对象,返回数组中被选中的元素;
    slice() 方法选择从给定的 start 参数开始的元素,并在给定的 end 参数处结束,但不包括;
    slice() 方法不会改变原始数组;

      var arr = [1, 2, 3];
      var newArr = arr.slice();
      arr[0] = 10;
      console.log(arr);// [10, 2, 3]
      console.log(newArr);// [1, 2, 3]
    

    方法三:扩展运算符

      var arr = [1, 2, 3];
      var [ ...newArr ] = arr;
      arr[0] = 10;
      console.log(arr); // [10, 2, 3]
      console.log(newArr);// [1, 2, 3]
    

    方法四: Object.assign()

     var arr = [1, 2, 3];
     var newArr = Object.assign([], arr);
     arr[0] = 10;
     console.log(arr);// [10, 2, 3]
     console.log(newArr);// [1, 2, 3]
    

    如果数组元素是对象或者数组,上面四种方法就会只拷贝数组或者对象的引用,如果我们对其中一个数组进行修改,另一个数组也会发生变化
    比如:

      var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
      let newArr = arr.concat();
      arr[0].a = 2;
      console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
      console.log(newArr);// [ { a: 2 }, [ 1, 2 ], 3 ] 值被影响
    

    下面是深复制(可以完全拷贝一个数组,即使嵌套了对象或者数组,两者也不会互相影响)
    方法一:JSON.parse(JSON.stringify(arr))

      var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
      // let newArr = JSON.parse(JSON.stringify(arr));
      let newArr = arr.concat();
      arr[0].a = 2;
      console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
      console.log(newArr);// [ { a: 1 }, [ 1, 2 ], 3 ]
    

    但是该方法是有局限性的

    • 会忽略 undefined
    • 会忽略 symbol
    • 不能序列化函数
    • 不能解决循环引用的对象

    比如下面这个例子:

    let a = {
      age: undefined,
      sex: Symbol('male'),
      jobs: function() {},
      name: 'sun'
    }
    let b = JSON.parse(JSON.stringify(a))
    console.log(b) // {name: "sun"}
    

    方法二:通用方法(数组或对象),拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数(简易版)

      var deepCopy = function(obj) {
        // 判断是否是对象
        if (typeof obj !== 'object') return;
        // 判断obj类型,根据类型新建一个对象或者数组
        var newObj = obj instanceof Array ? [] : {}
        // 遍历对象,进行赋值
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {
            let val = obj[key];
            // 判断属性值的类型,如果是对象,递归调用deepCopy
            newObj[key] = typeof val === 'object' ? deepCopy(val) : val
          }
        }
        return newObj
      }
    

    方法三:利用lodash的深拷贝函数
    _.cloneDeep(value)
    其中value就是要深拷贝的值

    简单例子

    var objects = [{ 'a': 1 }, { 'b': 2 }];
    var deep = _.cloneDeep(objects);
    console.log(deep[0] === objects[0]);
    // => false
    

    在Vue中使用
    安装

    npm i --save lodash
    

    在main.js中引入

    import _ from 'lodash';
    Vue.prototype._ = _;
    

    使用

    let newObj = this._.cloneDeep(oldObj)
    
    展开全文
  • 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的。 clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单。 引用 直接引用: <...

    常见方法

    查了一下万能的Google,现在常见的方法主要是以下两种:

    • 第三方库:clipboard.js
    • 原生方法:document.execCommand()

    分别来看看这两种方法是如何使用的。

    clipboard.js

    这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单。

    引用

    直接引用: 

    <script src="dist/clipboard.min.js"></script>
    
    包: 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 :表示命令名称,比如: copycut 等(更多命令见命令);
    • aShowDefaultUI:是否展示用户界面,一般情况下都是 false
    • aValueArgument:有些命令需要额外的参数,一般用不到;

    兼容性

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

    使用

    从输入框复制

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

    <input id="demoInput" value="hello world">
    <button id="btn">点我复制</button>
    
    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> 标签,我们可能需要从一个 <div> 中复制内容,或者直接复制变量。

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

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

    <button id="btn">点我复制</button>
    
    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);
    })
    

    总结

    以上就是关于JavaScript如何实现复制内容到剪贴板,附上几个链接:

    execCommand MDN

    execCommand兼容性

    clipboard.js

    原文地址:https://github.com/axuebin/articles/issues/26

    展开全文
  • copy.js:由 js 复制

    2021-06-10 05:44:08
    这是一个很简单的组件(100多行代码),用 js 实现复制文本的功能,这可能不太准确,因为如你所知,因为安全问题, 除IE以为的浏览器禁止用 js 将文本复制到剪贴板上,这个简单组件所能做的就是鼠标到目标文字时,使...
  • 移动端js 点击按钮复制到粘贴,有demo和js包,兼容性比较强
  • 使用JavaScript直接复制指定的内容,经过Opera、Safari、google、Firefox及IE等多个种类浏览器测试,均功能正常.
  • 如何复制一个网站中的内容,例如打开360doc网站,选中内容复制会弹出需要登录账号才能复制...最后,如上图所示,勾选“Disable JavaScript”后就可以直接复制当前页面中的内容。 特别提示:不要关闭开发者模式。 ...

    如何复制一个网站中的内容,例如打开360doc网站,选中内容复制会弹出需要登录账号才能复制内容。
    如何才能复制选中的内容呢,下面在chrome中演示如何复制网站内容。
    在这里插入图片描述

    在chrome中如何操作可以直接复制呢。

    第一步:在需要复制的页面中按F12调出开发者模式,如下图

    在这里插入图片描述

    第二步:点击上图中的箭头,如下图所示

    在这里插入图片描述

    最后,如上图所示,勾选“Disable JavaScript”后就可以直接复制当前页面中的内容。
    特别提示:不要关闭开发者模式。

    展开全文
  • // 执行浏览器复制命令 alert("已复制好,可贴粘。"); } [removed] <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea> <input type="button" o
  • JS 复制内容到剪贴板

    2022-02-23 14:30:03
    使用 JS 复制内容到剪贴板主要有两种方式: 使用 clipboard.js 插件 使用 document.execCommand() 原生方法 1.使用 clipboard.js 插件 改插件使用比较简单,兼容性较好。具体使用方法见:github clipboard.js 2....
  • js 复制粘贴功能

    2015-03-20 11:21:05
    zeroclipboard实现多浏览器复制到粘贴板功能
  • clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+ 官方网站:...
  • js复制事件

    2020-11-20 14:41:54
    一个非常实用的js复制事件 function copy(data) { let url = data; let oInput = document.createElement("input"); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象; ...
  • 常见方法查了一下万能的Google,现在常见的方法主要是以下两种:第三方库:clipboard.js原生方法:document.execCommand()分别来看看这两种方法是如何使用的。clipboard.js这是clipboard的官网:...
  • 主要介绍了JS简单实现点击复制链接的方法,提供了2种简单的复制链接操作方法供大家选择使用,需要的朋友可以参考下
  • 废话少说,放码过来。 function copy_to_clipboard(txt_str){ const input = document.createElement('input');... console.log('复制成功'); //Alert(500,'复制成功'); } document.body.removeChild(input); }
  • 说到使用js实现点击复制的功能,我下面想说的方法也是和网上的大同小异的。js实现是很简单,最难的是兼容问题,毕竟用IE以外的人还是有很多的
  • 点击一个按钮就能复制页面的内容对于客户来说可以节省很多的时间,复制的时候也要考虑到换行的问题,可以用\r\n。 <button onclick="copyToClip()">Copy To Clipboard</button> function copyToClip() {...
  • 现在浏览器种类也越来越多,诸如 IE、Firefox、Chrome、Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。
  • window.clipboardData可以实现复制与粘贴的操作,它的getData 方法可以实现数据的读取,setData方法可以实现数据的设置 [removed] function readTxt() { alert(window.clipboardData.getData("text")); } ...
  • 主要介绍了JavaScript 复制对象与Object.assign方法无法实现深复制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js 复制

    2018-08-08 11:40:30
    text/javascript"&gt; function copy() { var content=document.getElementById("content"); content.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制...
  • 针对于js移动端复制功能,iOS手机上不兼容的特殊处理。
  • Highlight.js复制按钮插件。 用法 下载插件并在highlight.js之后包含文件: < script src =" path/to/highlight.min.js " > </ script > < script src =" path/to/highlightjs-copy-button.min.js ...
  • js复制/添加节点

    千次阅读 2019-01-26 14:50:12
    cloneNode()方法可以复制一个节点,该方法能够给节点创建一个副本。 var ele = node.cloneNode(deep); deep是一个逻辑值: 参数值为true时,复制的节点将包含多有子节点内容; 参数值为false时,赋值的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 441,786
精华内容 176,714
关键字:

js复制

友情链接: 源码.rar