JavaScript实现内容复制

叁歲伎倆 2022-12-16 06:43 204阅读 0赞

主要使用 `document.execCommand('copy')` 实现内容的复制。

情况：

1.  复制表单元素，如 input textarea元素中的内容。
2.  复制如 div，span 元素中的内容。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div id="div">this is a div</div><br/>
      <textarea id="textarea">this is a textarea</textarea><br/>
      <input id="input" value="this is a input"/><br/>
      <button onclick="copy('div')">复制div内容</button>
      <button onclick="copy('textarea')">复制textarea内容</button>
      <button onclick="copy('input')">复制input内容</button>
    </body>
    <script> function copy(id) { // 复制指定元素中的文本内容 const el = document.getElementById(id); if (!el) { throw new TypeError(`${ id}的元素不存在！`); } const tagName = el.tagName; const formElList = ['input', 'textarea']; if (formElList.includes(tagName.toLowerCase())) { // 表单元素，如：input, textarea el.focus(); if (el.setSelectionRange) { el.setSelectionRange(0, el.value.length); } else { el.select(); } } else { // 非表单元素，如：div, span 等 if (document.selection) { // IE const range = document.body.createTextRange(); range.moveToElementText(el); range.select(); } else if (window.getSelection) { // 非IE const selection = window.getSelection(); const range = document.createRange(); selection.removeAllRanges(); range.selectNodeContents(el); selection.addRange(range); } } document.execCommand('copy'); } </script>
    </html>

[参考][Link 1]

[Link 1]: https://qinchao.cool/web/1

发表评论取消回复

表情：

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

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

相关阅读

相关【JS】JavaScript复制内容到剪贴板

常见方法查了一下万能的Google，现在常见的方法主要是以下两种：第三方库：clipboard.js 原生方法：document.execCommand

末蓝、/ 2022年12月20日 01:27/ 0 赞/ 224 阅读

相关 JavaScript实现内容复制

主要使用 `document.execCommand('copy')` 实现内容的复制。情况： 1. 复制表单元素，如 input textarea元素中的内容。 2.

叁歲伎倆/ 2022年12月16日 06:43/ 0 赞/ 205 阅读

相关 JavaScript 复制页面内容及换行

点击一个按钮就能复制页面的内容对于客户来说可以节省很多的时间，复制的时候也要考虑到换行的问题，可以用\\r\\n。 <button onclick="copyToCl

- 日理万妓/ 2022年12月07日 15:22/ 0 赞/ 691 阅读

相关 JavaScript实现复制和粘贴功能

1.前期准备考虑到兼容性，我们实现复制功能使用clipboard.js框架。参照如下地址下载： > [https://cdn.bootcss.com/clipboar

以你之姓@/ 2022年11月22日 00:25/ 0 赞/ 350 阅读

相关 JavaScript实现网页文本复制

写在前面今天想借鉴一下网络上文章，摘录（copy）一部分内容，结果竟然弹出收费窗口，这我哪里答应！下面，就把一个生活小妙招交给大家！问题解决 1. 打开网页

客官°小女子只卖身不卖艺/ 2022年11月02日 11:49/ 0 赞/ 163 阅读

相关 uni-app实现点击复制按钮复制内容

uni-app实现点击复制按钮复制内容 uni-app中有一个 uni.setClipboardData(obj) API方法 <view>{ {

淩亂°似流年/ 2022年09月05日 01:43/ 0 赞/ 650 阅读

相关 javascript复制网页内容 execCommand(´ Copy´ )

javascript复制网页内容 execCommand(´ Copy´ ) 大概就这几种主要方法，前三种要么过于繁琐不太好使要么兼容性不好，今天提供的方法就是最后一种

àì夳堔傛蜴生んèń/ 2022年07月14日 08:39/ 0 赞/ 246 阅读

相关 JavaScript实现复制到剪贴板

实现方式直接通过插件形式即可，使用clipboard，该插件不到 4KB。快速使用 1.html <input value="www.xxx.com

妖狐艹你老母/ 2022年02月23日 02:54/ 0 赞/ 459 阅读

相关 JavaScript实现剪切板复制功能

实现input框复制功能 <html> <head> <meta charset="UTF-8"> <meta n

女爷i/ 2022年02月15日 07:41/ 0 赞/ 392 阅读

相关 JavaScript 原生js实现点击按钮复制内容到剪切板

效果图 ![点击按钮复制内容][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

àì夳堔傛蜴生んèń/ 2021年09月21日 13:06/ 0 赞/ 541 阅读