每日 30 秒之 复制内容到剪贴板

2019-03-15 admin

简介

复制内容到剪贴板 是前端开发过程中会经常遇到的一个需求,大部分同学开发时往往会直接打开搜索框开始寻找别人写好的组件库,而聪明的同学会开始思考问题:

  • 产品的使用场景是什么?
  • 是否需要兼容很多浏览器?
  • 是否在项目中需要频繁使用?
  • 是否需要使用第三方库额外提供的功能?

当产品使用场景并不大和复杂时,可以使用这段 复制内容到剪贴板 代码:

// 该源码来自于 https://30secondsofcode.org
const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);

    const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);

    if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
    }
};

代码分析

浏览器提供了一个原生方法 document.execCommand('copy') 来实现 复制内容到剪贴板,但是它有一个使用前提“需要选择文本框或者输入框时”,所以先创建一个 textarea 文本框并通过定位让它不显示在屏幕里:

const el = document.createElement('textarea');
el.value = str;
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);

对创建好的 textarea 元素进行选中并使用复制里面的文本内容,最后移除掉 textarea 元素。

el.select();
document.execCommand('copy');
document.body.removeChild(el);

为什么跳过了一大段代码了?

其实到此为止就已经实现好了 复制内容到剪贴板,跳过代码分别是对两个场景的优化,可以根据产品开发的场景来选着是否使用这两段代码:

移动设备优化

移动设备上有一个问题 “当文本框被选中时,会弹出虚拟键盘” 会导致页面出现闪烁,如果手机响应较慢甚至可以看到虚拟键盘弹出和消失的过程。这段代码的点睛之笔之一在于把输入框设置为只读:

el.setAttribute('readonly', '');

小技巧:利用只读属性来防止弹出虚拟键盘。

可选中文本优化

代码的另外一处点睛之笔在于:如果用户选中了某段文字后点击复制内容到剪贴板的复制操作这段选中的文字就会消失掉,肥肥的大拇指在手机屏幕像选着文本内容一直是一件挺让人不舒服的操作,选中文字的消失十分影响用户体验。

我们可以利用 document.getSelection 一系列光标选中 API 来帮助我们先记录下用户之前所选的文字对象:

const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

再进行完复制操作后对 selected 进行判断,并恢复先前记录下用户之前所选的文字对象:

if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
}

打赏&联系

如果您感觉有收获,欢迎给我打赏,以激励我输出更多的优质内容。

打赏&联系

本文原稿来自 PushMeTop

[转载]原文链接:https://segmentfault.com/a/1190000018512057

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-57706.html

文章标题:每日 30 秒之 复制内容到剪贴板

相关文章
游戏机遇到来 非主流HTML5能否成器?
2014年第四季度以来,有60%的游戏行业从业者已经投入或准备投入开发HTML5为基础的游戏,并对其前景表示乐观的态度。   对HTML 5这项诞生于2008年的标准来说,其正在经历最好的时代。 游戏机遇到来 非主流HTML5能否成器?  ...
2015-11-12
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
数据格式之战:JSON vs XML
在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言,简称GML,它主要是为脚本语言定义的一...
2016-01-13
回到顶部