JavaScript实现内容复制

叁歲伎倆 2022-12-16 06:43 145阅读 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 条评论，145人围观）

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

相关阅读

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

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

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

相关 JavaScript实现内容复制

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

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

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

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

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

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

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

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

相关 jquery 复制内容

1. 下载js文件： https://github.com/zeroclipboard/zeroclipboard/tree/master/dis

偏执的太偏执、/ 2022年08月21日 03:08/ 0 赞/ 181 阅读

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

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

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

相关 js实现点击复制文本内容

要实现如下图，点击不同的微信复制微信并调出微信界面的功能 ![这里写图片描述][70] html构成，css样式自己写 <a href="weixin://"

迈不过友情╰/ 2022年05月12日 02:36/ 0 赞/ 234 阅读

相关 JavaScript实现复制到剪贴板

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

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

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

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

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

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

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

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