精华内容
下载资源
问答
  • js 复制文字和图片到剪贴板 最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了。让大家不迷路,共享出来,不用谢,点赞就行。 不多说,上...

    js 复制文字和图片到剪贴板

    最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了。让大家不迷路,共享出来,不用谢,点赞就行。

    不多说,上代码

    function copyInfo(sets){
        let imgDiv = document.createElement('div')
        imgDiv.id = '__imgDiv';
        imgDiv.setAttribute('style','z-index: -1;position: fixed;')
        let child = '';
        if(sets.txts){
            if(typeof sets.txts === 'string'){
                child += `<span>${sets.txts}</span>`
            }else{
                sets.txts.forEach(item=>{
                    child += `<span>${item}</span>`
                });
            }
        }
        if(sets.imgs){
            if(typeof sets.imgs === 'string'){
                sets.imgs = sets.imgs.indexOf('https')>-1?sets.imgs.replace('https','http'):sets.imgs;
                child += `<img src="${sets.imgs}" />`
            }else{
                sets.imgs.forEach(item=>{
                    item = item.indexOf('https')>-1?item.replace('https','http'):item;
                    child += `<img src="${item}" />`
                });
            }
        }
        imgDiv.innerHTML = child;
        document.body.insertBefore(imgDiv,document.body.lastChild)
        let dom = document.getElementById('__imgDiv')
        console.log(dom)
        if (window.getSelection) {//chrome等主流浏览器
            let selection = window.getSelection();
            let range = document.createRange();
            range.selectNodeContents(dom);
            selection.removeAllRanges();
            selection.addRange(range);
        } else if (document.body.createTextRange) {//ie
            let range = document.body.createTextRange();
            range.moveToElementText(dom);
            range.select();
        }
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        imgDiv.parentNode.removeChild(imgDiv);
    }
    

    那么怎么使用呢

    copyInfo({
       txts: '请复制我',
       imgs: ['https://img.shop.wusehaowu.com/20210407/da46894987254688af008a95ad121da9.png','https://t00img.yangkeduo.com/goods/images/2021-02-27/1e5bc93f957fefabc13d994a9f379dda.jpeg']
    });
    
    展开全文
  • 前言移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~效果预览Demo背景分析业务需求很简单,将指定的文字(例如: 关键字、文案描述等)复制手机的剪贴板上,方便用户...

    前言

    移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~

    效果预览

    Demo

    背景分析

    业务需求很简单,将指定的文字(例如: 关键字、文案描述等)复制到手机的剪贴板上,方便用户直接进行粘贴

    解决方案

    相关API

    document.execCommand

    该方法允许运行命令来操纵可编辑内容区域的元素,其中执行 copy 命令,可以将当前选中的内容拷贝到剪贴板中。兼容性如下所示:

    b345f3710e76d649781074cc0d64e549.png

    setSelectionRange

    该方法用于设定 input 或 textarea 元素中当前选中文本的起始和结束位置,接受两个参数:被选中的第一个字符的位置索引、被选中的最后一个字符的下一个位置索引。兼容性如下所示:

    2fac8e8bbf8fc0765df2a990f76011fd.png

    select

    该方法和 setSelectionRange 类似,唯一区别是 select 是全选,而 setSelectionRange 是手动指定选中范围

    实现思路

    DOM

    在某一个 DOM 元素中添加一个容器 DOM ,然后在容器 DOM 中追加 input 标签,并重置 input 的默认样式,同时将容器 DOM 的宽度位置为 1 ,透明度设置为 0

    .input_wrap {

    position: absolute;

    top: 0;

    left: 0;

    width: 1px;

    opacity: 0;

    overflow: hidden;

    user-select: none;

    }

    .input_wrap input {

    width: 1px;

    resize: none;

    border: none;

    outline: none;

    user-select: none;

    color: transparent;

    background: transparent;

    }

    JS逻辑

    首先获取我们事先隐藏好的 input 元素,接着将 input 的 value 设置为待复制的文本,然后将焦点聚集在 input 上,再使用 setSelectionRange 方法选中待复制的文本,最后使用document.execCommand('copy')执行复制命令,即可将相关文本复制到客户端的剪贴板中

    const input = document.getElementById('input');

    input.value = '待复制的文本内容';

    // 聚焦

    input.focus();

    // 选择需要复制的文本

    if (input.setSelectionRange) {

    input.setSelectionRange(0, input.value.length);

    } else {

    input.select();

    }

    try {

    const result = document.execCommand('copy');

    console.error(result ? '内容已复制' : '复制失败,请重试~');

    } catch (e) {

    console.error('复制失败,请重试~');

    }

    体验优化

    尽管我们已经实现了复制的能力,但是复制之后页面上会出现输入键盘,为了更好的用户体验,我们需要想办法屏蔽键盘

    blur

    我们为了选中待复制的文案,手动调用了 input 的 focus 方法进行聚焦,为了屏蔽键盘,我们可以在复制结束后手动调用 input.blur() ,让键盘自动隐藏

    activeElement

    尽管我们手动调用了 blur 释放焦点,但是部分机型上仍然会弹出输入键盘,这里想到的解决方案是使用 document.activeElement.blur() 来进行二次屏蔽,最终实践效果还不错,基本所有机型都不会弹出输入键盘,或者弹出键盘后立马回弹消失

    小结

    移动端实现复制能力,主要还是依赖HTML文档暴露的API来实现,最后花费时间最多的还是在进行体验优化上

    参考资料

    API - execCommand

    API - setSelectionRange

    源码地址

    mobile-copy-text

    b739ec46bb5c46d9c0aa4ce35ba1ea56.png

    关于找一找教程网

    本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。

    本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。

    [H5实现移动端复制文字功能]http://www.zyiz.net/tech/detail-144570.html

    展开全文
  • 一、快速选择所有文字并复制 输入命令 qse 回车 ...二、粘贴文字到另一个文件 来到另一个文件,找到工具栏上的“粘贴到原坐标” 有问题或数据获取可以免费咨询客服 http://mapgis.taobao.com ...

    在这里插入图片描述
    一、快速选择所有文字并复制
    输入命令 qse 回车
    在这里插入图片描述
    “对象类型”中选择“文字”,确定
    在这里插入图片描述
    在这里插入图片描述
    这样所有文字就处于选中状态了,再按快键键CTRL+C复制所有文字
    二、粘贴文字到另一个文件
    在这里插入图片描述
    来到另一个文件,找到工具栏上的“粘贴到原坐标”
    在这里插入图片描述
    有问题或数据下载欢迎免费咨询交流:
    http://mapgis.taobao.com

    展开全文
  • 网页无法复制文字怎么办?当我们在电脑上需要复制某个网页上的文字时,发现我们不能选择复制粘贴文字,那这种情况该怎么解决呢,网页无法复制文字怎么办,怎么解决网页无法复制粘贴文字情况,下面就和小编一起来看看...

    网页无法复制文字怎么办?当我们在电脑上需要复制某个网页上的文字时,发现我们不能选择复制粘贴文字,那这种情况该怎么解决呢,网页无法复制文字怎么办,怎么解决网页无法复制粘贴文字情况,下面就和小编一起来看看吧!

    1.可以使用谷歌浏览器扩展程序Allow Copy解决问题,打开谷歌浏览器的网上应用店,搜索【Allow Copy】;

    fc950c69e9ee869a2bd0c9c1ccc42171.png

    2.然后找到Simple Allow Copy,点击【添加至Chrome】将其添加到谷歌浏览器;

    1defcc68445caa559bf789f47ceab69b.png

    3.在上方弹出的“要添加Simple Allow Copy吗”提示窗口中,点击【添加扩展程序】;

    b95d6fe0c8145f15833225dfa6f963fc.png

    4.当提示“Simple Allow Copy已添加只Chrome”时,表示该扩展程序已经成功添加到谷歌浏览器;

    5f271a3e79abd28571849b0068d65049.png

    5.接着在谷歌浏览器打开我们不能选择复制粘贴的网页,点击右上角刚刚添加的Allow Copy扩展程序,当图标变成彩色时,表示该网页已经可以选择复制粘贴文字啦;

    注意,这款 simple allow copy 工具只是方便大家复制文字进行交流,可千万不要随便复制传播版权文字!

    7ba7e7d93d88e2a6981b2cee4ecd858a.png

    以上就是网页无法复制文字怎么办的全部内容了,希望以上内容对您有所帮助!

    展开全文
  • 1. 没有文字需求,可以浏览器保存网页为图片格式,保存图片查看学习或者打印。 2. 如果文档页数太多,保存为图片不方便查看做笔记,可以网页另存为本地版本之后,打开本地的HTML文件,复制全部,粘贴出来。再把...
  • 原标题:网页文字复制不了?你这样做,全网文字任你免费复制!快get!在网络上查找、搜集资料的时候,是不是总会遇到这样的问题:想要的资料文字,网页不给复制,放弃又觉得可惜,不放弃的话,手动输入提取的话,又...
  • 执行以下几条命令即可 sudo apt-get install open-vm-tools sudo apt-get install open-vm-tools-desktop 重启
  • 网页复制文字要收费怎么复制

    千次阅读 2021-07-28 11:33:17
    虽然审查元素复制很快,但是遇到多个分段的,有格式的就没那么方便了,我这里推荐一个可以直接选中复制的1-按F12,打开调试控制台,点击设置图标 2-点击preferences,在里面找到Debugger栏,打勾,静止...
  • 有时候在网上找文字素材的时候,一般...今天小编就分享三种方法给大家,不多不少就三种,帮你轻松搞定网页限制,复制想要的文字~至于种最好,还是看大家的喜好啦!1、Ctrl+P没错,就是这个快捷键。p代表print,打...
  • 一、安装插件 npm install vue-clipboard2 --save ...单击span文字就可以选中span标签的文字,并且复制到剪贴板 template代码 <el-table> <el-table-column prop="name" label="名字
  • 我们经常从网上或者其他的文章中复制一些文字到我们的word文档编辑一篇文章,但有时我们会发现,由于格式不一样,有时会出现一段文字没有到整行就自动换行了,很不美观,但是前面虽然是空格显示,一删除,没有删掉...
  • 局部变量,比如函数中定义的变量只在函数中有效,每次调用函数时创建局部变量,在函数调用完以后,变量会被销毁类命名空间和对象命名空间在类中定义的变量或者手动绑定类和对象上的变量属于这两个命名空间中,在...
  • 复制粘贴文字变乱码解决

    千次阅读 2020-12-21 07:08:50
    复制文字前用打开任意一种中文输入法,再执行“复制”→“粘贴”操作,这样就不会出现乱码问题了。2.不使用操作系统自带的“文本编辑器”,如记事本。而是安装专门的EmEditor或UltraEdit文本编辑器,在里面选择...
  • 1,在你要复制文字的页面,按F12,选择“ Console” 输入:document.body.innerText 然后按回车
  • 复制文字需要收费,破解复制

    千次阅读 2021-06-09 19:47:45
    遇到不可复制的文章解决办法 发现要付费,这里教大家一个办法 我用的是Microsoft Edge浏览器 当然别的浏览器有插件的话理论上是可以的 ...这个时候就可以自由复制所有要的文字 感谢观众老爷的收看! ...
  • 原标题:网页禁止复制文字?学会这六招,全网内容任你免费复制!不知道大家有没有过这种经历,有时候在网上找资料找了半天,结果终于找到一个自己想要的资料,结果居然不能复制,要么就是限制复制字数,真的是很无奈...
  • 10种方式教你复制网页中不能复制文字很多seoer写软文都会复制网页中的文字,但是很多网页中的文字都不能复制,于是综合自己平时遇到的问题,收集了10种方式,仅供大家参考,有的我自己没有试过,部分没试过的,...
  • 【PConline 技巧】很多朋友上网有遇到过这样的一种情况,明明看到网页上有文字,但是这些文字无法选择用鼠标拖动选择,也没法复制下来。这种情况在某些注重版权的网站,例如在线书城、在线文档站点等当中比较常见,...
  • 在浏览网页时经常遇到想要复制又不能复制文字,其实是前端的一种遮罩层,如何复制? 解决办法:右键 ->检查 进入开发者模式,按如图123的步骤,选择定位复制文字,右键取消隐藏元素,Hide element ...
  • Chrome 复制网页不可复制文字

    千次阅读 2020-12-20 14:10:08
    1.在目标网页点击“F12”或者点击右上角更多工具-->开发者工具 2.然后选择最上面一行的Console这个选项, 在最下面的控制台输入:document.body.innerText 3.然后在这一栏就出现文本,可以自由复制。 ...
  • 虽然是在安卓中复制文字很方便,但其实并不是所有界面都可以复制出文字的。某些App和某些界面,也许是出于版权保护或者是其他的一些原因,就不支持系统的剪贴板功能,无法直接把App中的文字复制出来。怎么办?这款...
  • """ 将需要的字符串或文字复制到剪切板. """ from Tkinter import Tk r = Tk() r.withdraw() r.clipboard_clear() r.clipboard_append(string) r.update() if __name__ == '__main__': Copy_To_Clipboard...
  • 想要的是,Windows中复制的内容,直接粘贴在Linux中,具体解决办法如下: 1、安装 open-vm-tools,代替VMWare Tools (1)sudo apt-get autoremove open-vm-tools (2)sudo apt-get update (3)sudo apt-get ...
  • 免费复制网页文字

    2021-03-15 14:41:13
    Google浏览器复制网页文字截图并OCR识别拓展工具 Enable Copy 截图并OCR识别 使用截图软件(推荐 Snipaste)将需要复制文字部分截图并保存。 使用OCR工具(推荐Online OCR)对文字进行识别。 PS: 这种方法需要...
  • 目前网页最常见的一键复制方式:ZeroClipboard,Clipboard.js,execCommand,setData,和只支持老旧IE的其它鸡肋方法。前两种是JS插件,不在此文讨论之列,今天我们单纯讲最简单的document.execCommand("copy")代码...
  • 不过,有些用户在Win7系统中使用复制粘贴功能复制粘贴文字时发现该功能失效,导致操作失败。那么,遇到这问题时该怎么来处理呢?针对此问题,现在,小编就来和大家讲解方法,一起来看下文具体内容吧。要是遇到电脑...
  • 在平时的学习过程中,会遇到一些对版权保护比较到位的网站,上面的文字只能看不能复制,作为一名超小站长的我都十分理解这种做法,毕竟谁也不希望自己辛辛苦苦写的文章被别人一键复制进行获利,结果连原作者的名字也...
  • 或者一些经典的话,又或者一些精美的图片等等,但是当我们希望把这句话,或者图片复制过来时,却发现网页时做了限制的无法复制文字还好,但是图片就没有办法了,网上找也找不!那么,网页文字不能复制粘贴怎么...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 284,171
精华内容 113,668
关键字:

复制文字到哪去了