H5/纯JS实现:把网页中的文字复制到剪切板

   const dom = document.getElementById(`span1`)
    const selection = window.getSelection()
    const range = document.createRange()

    // 选择复制目标
    range.selectNodeContents(dom)
    selection.removeAllRanges()
    selection.addRange(range)

    // 已复制文字
    console.log(‘selectedText‘, selection.toString())

    // 执行复制
    document.execCommand(‘copy‘)

    // 去除所有选中,否则该元素会显示为 被选中的颜色
    selection.removeAllRanges()
   

原文地址:https://www.cnblogs.com/ww01/p/11950734.html

时间: 2024-10-07 12:48:16

H5/纯JS实现:把网页中的文字复制到剪切板的相关文章

网页中禁止文字复制

禁止鼠标选中文字 用js可以在页面中写 onselectstart="return false" 比如说 <div style="width:200px;height:200px;" onselectstart="return false">这里面的文字是不能被鼠标选中的</div> 现在我的问题是 要把 onselectstart="return false" 写进class中,怎样实现呢? 我不想要

[JavaScript] js 复制到剪切板

zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard 下载压缩包,得到两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件. 首先页面中载入ZeroClipboard.js ZeroClipboard.setMoviePath( “ZeroClipboard.swf路径” );来指定ZeroClipboard.swf 的地址. demo: <!DOCTYPE html> <html

回顾JS如何向网页中输入内容,与浏览器窗口进行交互

第2章 请和我互动(常用互动方法) 本章节主要讲解如何向网页中输入内容,如何与浏览器窗口进行交互,通过简单的对象方法就可以轻松实现. 2-1 JavaScript-输出内容(document.write) 2-2 JavaScript-警告(alert 消息对话框) 2-3 JavaScript-确认(confirm 消息对话框) 2-4 JavaScript-提问(prompt 消息对话框) 2-5 JavaScript-打开新窗口(window.open) 2-6 JavaScript-关闭

javaScript 实现倒计时 + 获取网页中的文字

一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var count

js实现复制到剪切板

搜罗到两种兼容性还不错的方式. 1.第一种,通过clipboard.js插件实现(推荐) 此插件封装了很多种使用方式很方便,具体demo,可以去GitHub上看,clipboard传送门 2.第二种,纯js实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CopyDemo</title> </

用js怎么在网页中实现多图片自由移动

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ position: absolute; width: 200px; height: 200px; background-color: #ccc; } </style> </

clipboard.js实现复制到剪切板

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <main class="wrap"> <div id="example-text" class="example"> <div data-clipbo

js 复制到剪切板

function copyTextToClipboard(text) { var copyFrom = $('<textarea/>'); copyFrom.text(text); $('body').append(copyFrom); copyFrom.select(); document.execCommand('copy'); copyFrom.remove(); }

在网页中使用js以及注意事项

一.<script>标签的解析: <script>xxx</script>这组标签,是用于在 html 页面中插入 js 的主要方法.它主要有以下几个属性: 1.charset:可选.表示通过 src 属性指定的字符集.被大多数浏览器忽略,很少有人用. 2.defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.大多数浏览器不支持,很少用.可以将JS代码放在html内容的后面,这样可实现延时加载 3.language:已废弃.原来用于代码使用的脚本语言.被大