精华内容
下载资源
问答
  • 本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码如下: <!DOCTYPE html> <...
  • 移动端点击按钮复制文本内容,具体内容如下所示: 邀请码 // <p id=inviteCode class=inviteCode>{{invite_code}} <input id=inviteCode class=inviteCode type=text /> 复制 copy() { var Url2 = this....
  • js 复制文本的四种方式

    千次阅读 2018-06-16 05:06:00
    js 复制文本的四种方式 一、总结 一句话总结:js文本复制主流方法:document的execCommand方法     二、js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.cnblogs.com/xhyu/p/5370111.html ...

    js 复制文本的四种方式

    一、总结

    一句话总结:js文本复制主流方法:document的execCommand方法

     

     

    二、js 复制文本的四种方式

    纯 转载复制,非原创

    原地址:http://www.cnblogs.com/xhyu/p/5370111.html

    目前copy主流有四种方式:ZeroClipboardClipboard.jsexecCommand,setData,再就是其他只支持IE的鸡肋法了不在此讨论。。

    概况:

    ZeroClipboard 就是常说的Flash法,通过加载一个Flash,让其访问系统剪贴板来绕过绝大多数系统的权限限制,然而体积稍微庞大些

    Clipboard.js 近几年使用较多,体积相对小,兼容性可以接受,使用还比较方便。

    execCommand 新兴势力,safari等主流正在努力兼容,是个好东西。

    setData 太老。。一般不太用,基本只适合IE

    兼容性:

    ZeroClipboard 兼容性最好,能全面兼容chrome/ FireFox/ IE/ 甚至Safari 这种“友好”的浏览器

    Clipboard.js和execCommand兼容性相似,兼容chrome/ FF/ IE>9/ Safari新版(不太懂Safari版本号如何算。。感觉15年以后的都可以)

    setData 仅IE

    体积:

    ZeroClipboard 插件较大,230KB

    Clipboard.js 较小,4KB

    execCommand是document方法,不用插件直接搞

    虽说体积有差,加载起来速度差不多的其实。。话说git好像就是用的ZeroClipboard

     

    Clipboard.js 实验经过:

    直接忽略胖胖的Flash法,,先盯上的Clipboard.js,用起来着实简单,先引用压缩版:

    <script src="dist/clipboard.min.js"></script>

    新建Clipboard对象(顺便:'.btn'给所有class="btn"的元素都加了监听,其他用法可查JS)

    复制代码
    var clipboard = new Clipboard('.btn');
    
    //可以自己加些处理
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
    
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    复制代码

    HTML里这样就OK了

    <button class="btn" data-clipboard-target="#foo">

    使用清爽,测试通过,然而项目只有一个地方用到copy,为了他加个插件真是不优美。。于是终于找到了近期出现的execCommand()大法 (生在了好时代Orz)

     

    execCommand()大法:

    其实只需要选中要复制的内容,执行document.execCommand('copy', false, null)就好了。execCommand里可以跑很多例如paste等方法,第一个参数是方法名,第二个是是否展示默认ui,第三个是可选参数列表,对copy来说后两个都用不到。

    根据兼容不同,执行后可能的情况(涉及返回值):

    1.不支持execCommand:抛出异常 2.不支持copy方法:返回false 3.成功:true

    因此框架可以这样写:

    复制代码
    copy_target.focus();
    copy_target.select();
    try{
        if(document.execCommand('copy', false, null)){
            //success info
        } else{
            //fail info
        }
    } catch(err){
        //fail info
    }
    复制代码

    给用户的反馈用的jquery的tooltip,然后写成一个function就是如下:

    复制代码
    function copy(copytargetid,copybtnid){
        var cpt = document.getElementById(copytargetid);
        var cpb = document.getElementById(copybtnid);
        $(cpt).focus();
        $(cpt).select();
        try{
            if(document.execCommand('copy', false, null)){
                $(cpb).tooltip({title:"copied!", placement: "bottom", trigger: "manual"});
                $(cpb).tooltip('show');
                cpb.onmouseout=function(){$(cpb).tooltip('destroy')};
            } else{
                $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});
                $(cpb).tooltip('show');
                cpb.onmouseout=function(){$(cpb).tooltip('destroy')};
            }
        } catch(err){
            $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});
            $(cpb).tooltip('show');
            cpb.onmouseout=function(){$(cpb).tooltip('destroy')};
        }
    }
    复制代码

    用的时候直接

    <button id="cpbtn" onclick="copy('cptar', 'cpbtn')">copy</button>

    即可

     

    到此还没有结束。。。

    项目用的vue,于是需要做成vue的method,又是用coffee写的,改了下语法,在初次渲染的html中测试通过了,然后。。。我的copy妞是个vex模态框。。button是写在vex.dialog.open的message里的,message是个字符串,弹窗时候强注一段html。而且vue函数是只在渲染阶段绑定,所以。。。初次vue渲染的时候不会识别到字符串中的v-on:click,无法绑定。。于是不能从button元素直接调。

    决定搞一个隐藏input中继一下,最后终于用比较优美的姿势实现了。。。(上次是直接在message里强行注入script。。。涉及script嵌套还加了个转义<\/script>,结果丑的一bi。。)

    button里 οnclick="document.getElementById('copyrelay').select()",input里@select('copy(...)')(@是vue的v-on:的缩写)。

    终于测试一切完好,天真的以为加个display: none就大功告成。。结果发现跪了

    原来是display:none的元素并不能被select。。

    同样的,也不能focus, change等等,于是顺着onerror等事件挨个试了一遍。。发现貌似只有onclick work。。。

    另外还顺带试了一下,<input type="hidden"/>也是不能用那些事件;即使正常显示元素,value=""的话也不能触发select。

    当然,至于是.select()没有成功,还是元素没有触发select事件,还是没有触发v-on:select,有待确定,有时间可以试一下。

     

    Anyway,最终代码:

    <input id="copyrelay" style="display: none;" @click=“copy('cptg','cpbt')”/>
    
    <!--vex.dialog.open的message中:-->
    <input id="cpbt" type="button" onclick="document.getElementById('copyrelay').click()"/>
    <input id="cptg" value="copy test" readonly/>

    method中的copy函数如上所提,转为coffee。

     

    我这个伪frontend太弱了。。还是希望给贵司多搞点贡献。。。

    感谢lrx,lyy,P8,zzl,xxm犇们Orz。。。

    就这样。

     

     

     

     
     
     
    展开全文
  • NULL 博文链接:https://curtain.iteye.com/blog/1328750
  • 主要为大家详细介绍了js+html5实现复制文字按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板 但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好使 最后我的解决方案是,在...
  • // 执行浏览器复制命令 alert("已复制好,可贴粘。"); } [removed] <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea> <input type="button" o
  • JS实现复制文本功能

    2020-12-01 16:19:06
    document.execCommand("Copy") 复制选中内容到剪贴板,返回值是一个boolean值,如果是 false 则表示操作不被支持或未被启用。了解更多 废话少说直接上代码 // 1. 创建 // 自调用Clipboard函数返回值为一个对象,该...

    核心api:

    • textArea.select(); 代替手动实现自动选中文本
    • document.execCommand("Copy") 复制选中内容到剪贴板,返回值是一个boolean值,如果是 false 则表示操作不被支持或未被启用。了解更多

    废话少说直接上代码

    // 1. 创建
    // 自调用Clipboard函数返回值为一个对象,该对象有一个copy方法,将该对象挂到全局window上,以便在项目的任何地方都能使用
    window.Clipboard = (function (window, document, navigator) {
        var textArea; // 文本域Dom对象
        var copy; // 复制函数
        // 判断是不是ios端
        function isOS() {
            return navigator.userAgent.match(/ipad|iphone/i);
        }
        //创建文本元素
        function createTextArea(text) {
            textArea = document.createElement('textArea');
            textArea.value = text;
            document.body.appendChild(textArea);
        }
        //选择内容
        function selectText() {
            var range, selection;
            if (isOS()) {
                range = document.createRange();
                range.selectNodeContents(textArea);
                selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                textArea.setSelectionRange(0, 999999);
            } else {
                textArea.select();
            }
        }
        //复制到剪贴板
        function copyToClipboard() {
            try {
                if (document.execCommand("Copy")) {
                    alert("复制成功!");
                } else {
                    alert("复制失败!请手动复制!");
                }
            } catch (err) {
                alert("复制错误!请手动复制!")
            }
            document.body.removeChild(textArea);
        }
        copy = function (text) {
            createTextArea(text);
            selectText();
            copyToClipboard();
        };
        return {
            copy: copy
        };
    })(window, document, navigator)
    // 2. 使用
    DeviceDetail.copy = function(type) {
        var url = type === 'flvUrl' ? $(".flv-url").text() : (type === 'rtmpUrl' ? $(".rtmp-url").text(): '')
        Clipboard.copy(url);
    }
    
    <div><label>FLV 地址:</label><span class="flv-url"></span>&nbsp;<span class="flv-copy hidden" onclick="DeviceDetail.copy('flvUrl')">复制</span></div>
    
    展开全文
  • 复制文案同时保留其缩进排版 // 复制文案同时保留其缩进排版 copyFn(){ const selection = window.getSelection() selection.removeAllRanges() const range = document.createRange() range....
    1. 复制文案同时保留其缩进排版
    // 复制文案同时保留其缩进排版
    copyFn(){
        const selection = window.getSelection()
        selection.removeAllRanges()
        const range = document.createRange()
        range.selectNodeContents(document.getElementById('code-wrap')) // 需要选中的dom节点
        selection.addRange(range)
        document.execCommand('copy')
        selection.removeAllRanges()
    }
    

    2.仅复制文案(所有文案都在一行)

    // 仅复制文案(所有文案都在一行)
    copyFn(data){
        const url = data // 要复制的文案
        const oInput = document.createElement('input')
        oInput.value = url
        document.body.appendChild(oInput)
        oInput.select()
        document.execCommand('Copy')
        oInput.remove()
    }
    
    展开全文
  • 本文主要是通过javascript实现禁止浏览器中复制文本内容的方法,十分的简单,而且兼容IE和FF,有需要的小伙伴可以参考下
  • js 复制文本,保留换行符

    千次阅读 2019-08-29 17:36:53
    一般的js复制就是用input标签,然后copy 但是 input是不会保留换行符的 所以,可以采用textarea标签 const input = document.createElement('textarea') // input.setAttribute('value', this.copyDoc) // 注意...

    一般的js复制就是用input标签,然后copy

    但是

    input是不会保留换行符的

    所以,可以采用textarea标签

    const input = document.createElement('textarea')
    // input.setAttribute('value', this.copyDoc) // 注意,这样写不行
    input.value = this.doc
    document.body.appendChild(input)
    input.select()
    document.execCommand('Copy')
    document.body.removeChild(input)

    注意:用setAttribute方式赋值value不行

     

    关于markdown文档格式, 说一句,将换行符\n修改成<br>,能换行,但是文档也不会解析了,文档需要的是,实质上的换行,才能解析

    展开全文
  • js实现复制文本并提示复制成功(干货) 直接放项目里就能直接用
  • Web js复制文本到粘贴板 一、简述 记--简单用js实现将元素的文本内容复制到粘贴板。 二、效果 三、代码 <!DOCTYPE html> <html> <head> <meta charset="utf...
  • 1.js仅直接复制文本(修复ios会自动弹出键盘的问题) const input = document.createElement('input'); document.body.appendChild(input); input.setAttribute('value', 你要复制的文本); input.setAttribute('...
  • 作为当代大学生,面对形式主义的课程,我们常常选择形式主义的手段来应付。 在网上抄一些无关紧要的论文,再常见不过... 新建文本文档.txt 粘贴并保存 改txt为html并用浏览器打开 这样就可以优雅的抄论文了~ ...
  • js复制文本

    2018-06-21 15:59:05
    html 实现js复制文本,包括textarea标签,input标签,span标签的复制
  • JS复制文本

    2020-01-12 11:26:56
    页面上有input文本框和一个按钮,如果所示: 代码如下: ... ()">复制地址 ...现在需要点击“复制地址”,将文本框中内容复制到粘贴板,代码如下: ... $.modal.alertSuccess...仅仅两行代码,就实现了文本复制功能。
  • //复制文本值 var clipboard = new Clipboard('.copySrc'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger...
  • 查过一些方法,在电脑端可以复制粘贴,一放在手机上面打开网页就不能复制粘贴了。 直接进入正题 使用开源项目 clipboard.js, 官网:点击打开链接 可以通过script标签引入 也可以通过npm安装,npm install ...
  • js复制文本到剪贴板If you’re doing work at the command line on your Windows box, it’s sometimes useful to copy the output of a command to the clipboard, but who wants to try and scroll and click to ...
  • 主要给大家介绍了node.js实现复制文本到剪切板的功能,文中介绍的非常详细,并给出示例代码,相信对大家具有一定的参考借鉴价值,有需要的朋友们下面来一起看看吧。
  • * 复制文本到剪切板中 * * @export * @param {*} value 需要复制的文本 * @param {*} cb 复制成功后的回调 */ export function copy(value, cb) { // 动态创建 textarea 标签 const textarea = document....
  • 原生JavaScript实现文本复制到剪切板,点击按钮后,直接粘贴即可~ HTML部分: <button class="btn btn-info btn-minier copy-btn" data-text="卖家test">复制卖家名称</button> js部分: // 调用...
  • js怎么实现复制文本

    2020-12-15 19:49:39
    if (navigator.clipboard) { ... showTips('复制成功!', 30, 2); } else { const eventCopyer = event => { event.preventDefault(); event.clipboardData.setData("text/plain", 'test text'); }
  • 文章目录js点击复制文本 :代码+效果图效果图 · 示下:html 代码如下:注意代码:附:[javascript监听键盘事件 - 如表单enter回车提交](https://blog.csdn.net/qq_35393869/article/details/79854995) js点击复制...
  • 主要介绍了js实现点击复制当前文本到剪贴板功能,兼容所有浏览器,感兴趣的小伙伴们可以参考一下
  • js实现复制文本并提示复制成功(干货)适用所有浏览器 直接放项目就能用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 125,793
精华内容 50,317
关键字:

js复制文本