js 实现一键复制功能

心已赠人 2021-08-13 11:29 627阅读 0赞

// html
    
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>复制</button>

// js
    $('button').click(e=>{ 
    	$('textarea').select()
    	document.execCommand("Copy")
    })

变通一下使其能复制`p / div / span`中的内容  
首先把`textarea`的`opacity`设置为0 使其不可见。  
例

<div class="layui-col-md12">
       <div class="layui-form-item layui-form-text" style="text-align: right;">
            <button id="copy" class="layui-btn layui-btn-sm">复制内容</button>
        </div>
        <pre id="viewColumn" class="layui-code"></pre>
        <textarea style="opacity: 0; height: 0;" id="_copy" cols="30" rows="1"></textarea>
    </div>
    
    
    // js
    // 点击赋值， 
    $("#run").click(e => { 
        if ($('#textarea').val().trim() == '' || $('#textarea1').val().trim() == '') return false
        let fileds = createArr($('#textarea').val()),
            titles = createArr($('#textarea1').val())
        $('#viewColumn').html(createColumn(fileds, titles))
        $('#_copy').html(createColumn(fileds, titles))  // 同时给不可见的textarea赋值，
    })
    // 点击复制
    $("#copy").click(e => { 
    // 如果没有在上边赋值， 也可以在这里赋值，先赋值，在选中，后复制
      $('#_copy').select()
      document.execCommand("Copy")
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，627人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现复制粘贴功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...

本是古典何须时尚/ 2024年04月18日 21:58/ 0 赞/ 45 阅读

相关 JS一键复制功能-Clipboard插件

一. Clipboard方法 exports.zclip = function()\{ new Clipboard('\danShiNumberCopy').on('suc

曾经终败给现在/ 2022年12月24日 03:00/ 0 赞/ 133 阅读

相关实现一键复制

// 一键复制 copyText() { const transfer = document.createElement('input')

亦凉/ 2022年09月11日 14:27/ 0 赞/ 137 阅读

相关 JS 实现复制粘贴功能

JS 实现复制粘贴功能目前没有做过多的测试，只是测试了几个手机，介绍：支持情况（1）移动端： 1. chrome（版本 58.0.3029.96 (64

柔光的暖阳◎/ 2022年06月15日 04:57/ 0 赞/ 215 阅读

相关使用js实现复制功能

首先下载复制文件所需的js文件 [https://github.com/zenorocha/clipboard.js][https_github.com_zeno

野性酷女/ 2022年06月08日 10:28/ 0 赞/ 246 阅读

相关 clipboard.js复制功能实现

前言 clipboard.js是前端实现复制文本到剪贴板的插件，简单记录一下使用方法。具体使用 1.简单的demo <!DOCTYPE html>

拼搏现实的明天。/ 2022年05月18日 09:05/ 0 赞/ 250 阅读

相关小程序 - 实现【一键复制】功能

小程序 - 实现【一键复制】功能为啥想起使用【一键复制】功能？因为个人小程序里，不许加外链接，很是头疼，就想到一键复制链接，这是我刚写的一个减一的小程序： ![148

雨点打透心脏的1/2处/ 2022年04月22日 06:41/ 0 赞/ 302 阅读

相关 js一键复制

<div> <span id="copyMy"> 复制我试试</span> <button onClick="copyFn()">点击复制</

短命女/ 2022年02月28日 06:56/ 0 赞/ 221 阅读

相关 Angular.js实现一键全选的功能

实现代码如下： <head> <title>撸起袖子加油干</title> <meta charset='utf-8'> <script sr

客官°小女子只卖身不卖艺/ 2022年02月15日 07:43/ 0 赞/ 221 阅读

相关 js 实现一键复制功能

// html <textarea name="" id="" cols="30" rows="10"></textarea>

心已赠人/ 2021年08月13日 11:29/ 0 赞/ 628 阅读