一键复制功能

简介: 一键复制功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一键复制(整理)</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
  <span id="textBox">13641223555</span>
  <button id="copy1">复制电话号码</button>
  <span class="textBox">13000000000</span>
  <span class="textBox">13111111111</span>
  <span class="textBox">13222222222</span>
  <span class="textBox">13333333333</span>
  <span class="textBox">13444444444</span>
  <br />
  <button id="copy2">点击复制返回文本</button>
<script>
var copy1 = document.getElementById('copy1');
var copy2 = document.getElementById('copy2');
var textBox = document.getElementById('textBox');
copy1.onclick = function() {
    copyText(textBox);
}
$(".textBox").click(function(){
  var html = $(this).html();
  copyText(html);
});
copy2.onclick = function() {
    copyText('电话号码:' + textBox.innerHTML);
}
/**复制文本 */
function copyText(node) {
    if (!node) {
        return;
    }
    var result;
    // 将复制内容添加到临时textarea元素中
    var tempTextarea = document.createElement('textarea');
    document.body.appendChild(tempTextarea);
    if (typeof(node) == 'object') {
        // 复制节点中内容
        // 是否表单
        if (node.value) {
            tempTextarea.value = node.value;
        } else {
            tempTextarea.value = node.innerHTML;
        }
    } else {
        // 直接复制文本
        tempTextarea.value = node;
    }
    // 判断设备
    var u = navigator.userAgent;
    if (u.match(/(iPhone|iPod|iPad);?/i)) {
        // iOS
        // 移除已选择的元素
        window.getSelection().removeAllRanges();
        // 创建一个Range对象
        var range = document.createRange();
        // 选中
        range.selectNode(tempTextarea);
        // 执行选中元素
        window.getSelection().addRange(range);
        // 复制
        result = document.execCommand('copy');
        // 移除选中元素
        window.getSelection().removeAllRanges();
    } else {
        // 选中    
        tempTextarea.select();
        // 复制
        result = document.execCommand('Copy');
    }
    // 移除临时文本域
    document.body.removeChild(tempTextarea);
    if (result) {
        alert('复制成功', {
            removeTime: 1000
        })
    } else {
        alert('复制失败', {
            removeTime: 1000
        })
    }
    return result;
}
</script>
</body>
</html>
相关文章
|
3月前
|
JavaScript 前端开发
JS实现一键复制、选中复制、选中多行复制
文章介绍了如何使用JavaScript实现一键复制文本、选中文本复制以及选中多行文本复制的功能。提供了详细的代码示例,包括创建临时textarea元素、选中文本、执行复制命令、用户提示以及清理临时元素的完整流程。同时,还考虑了用户可能选中多行文本进行复制的情况。
185 0
|
7月前
|
前端开发 JavaScript 安全
神奇的代码——可随意修改复制页面内容
神奇的代码——可随意修改复制页面内容
|
7月前
|
Windows
FastCopy文件快速复制
FastCopy文件快速复制工具。Windows平台上最快的文件复制、删除软件!功能强劲,性能优越!它是源于日本的高效文件复制加速软件,支持拖拽操作,三种不同HDD模式;支持通配符,任务管理/命令行
47 0
|
开发者 Python
列表的复制|学习笔记
快速学习列表的复制
|
Web App开发 JavaScript 前端开发
前端er怎样操作剪切复制以及禁止复制+破解等
前言 有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。 我也经常遇到这些场景,有时候会去想这后面到底是怎么做,周末趁着有空去研究了一下,然后发现这些都跟操作剪贴板有关系,并且都不难,了解一下基本都知道怎么做了,整理分享一波给大家。 个人博客了解一下:obkoro1.com 目录: API介绍 实现类知乎/掘金复制大段文本添加版权信息 实现类起点网的防复制功能 破解防复制 点击复制功能 API介绍: 复制、剪切、粘贴事件: copy 发生复制操作时触发;
524 0
前端er怎样操作剪切复制以及禁止复制+破解等
|
关系型数据库 MySQL API
组复制插件架构
组复制插件架构
128 0
|
编解码 Windows
Win系统 - 如何实现N卡四屏复制输出呢?
Win系统 - 如何实现N卡四屏复制输出呢?
245 0
Win系统 - 如何实现N卡四屏复制输出呢?
|
存储 NoSQL Redis