JS笔记-製作copy效果

目录

JS笔记-帮元素加上style的写法

JS笔记-getPosition 让你找到元素x,y位置

js笔记--写脚本需要用到的waitForKeyElements.js

JS笔记-设定CSSstyle的function

JS笔记-使用fetch下载档案/download.js好用的东西

JS笔记-前端新手练习小专案（附加4个JS实例网站可学）

JS笔记-关掉alert的简单小技巧

JS笔记-使用ajax传送表单(ex.传送google表单)

JS笔记-前端拨放m3u8的两种方法

JS笔记-让chrome跳过「允许下载多个档案」的技巧

JS笔记-製作copy效果

JS笔记-暂时让网页可以编辑

JS笔记-VScode自己设定速打

JS笔记-VScode的Prettier(自动排版)怎么开始使用？

前情提要

在网页中使用複製功能是超级常见的套路！

例如说你要借鉴(抄袭)人家的程式码，很多行要自己选取很麻烦，网站设计者为了让你好抄(?
会用右边一个copy按钮，让你按下去就爽爽複製惹(^y^)
毕竟工程师们谁不是一路抄过来der 当然要设身处地为你找想呀

今天我们就要实际讲解 怎么当一个贴心的前端工程师 一方面你自己要複製也hen方便

我会先从MDN开始到W3C让各位学会怎么使用

MDN-Clipboard API

MDN

剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。

这边简体字我就不改惹 MDN只有简体的~

How TO - Copy Text to Clipboard

範例地方:
https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

可以看的出来这边是使用一个textarea 里面放置要被複製的文字
再使用JS去copy起来
我们要应用的话可以用同样的方法 但是用CSS 的display none把textarea隐藏 即可

实际使用

想知道怎么实际使用吗？可以看我的
前端小试身手(5)-备份it帮的发问！

就是为了it帮发文量身打造的备份功能！其中就有用到JS的copy，又可爱又实用，这招学起来真的超帅！