脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Web js复制文本到粘贴板

Web js实现复制文本到粘贴板

 更新时间：2022年08月23日 10:52:48   作者：Genven_Liang  
这篇文章主要为大家详细介绍了Web js实现复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码，供大家参考，具体内容如下

一、简述

记--简单用js实现将元素的文本内容复制到粘贴板。

二、效果

三、代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>js复制内容到粘贴板</title>
    <script type="text/javascript">    
        <!--随机字符串-->
        var randomStr = "0123456789abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        
        <!--生成随机码-->
        function genRandomCode(len){
            
            var randomCode = "";
            var y = randomStr.length-1;
            var x = 0;
            
            var i;
            var index;
            for(i=0; i<len; i++){
                <!--生成[x,y]范围内的随机数-->
                index = Math.floor(Math.random()*(y+1-x)+x);
                
                <!--获取字符串中的其中一个字符-->                
                randomCode += randomStr.charAt(index);
            }
            return randomCode;
        }
        
        <!--生成随机码并设置到input输入框-->
        function setRandomCode(elementID, len){
            var randomCode = genRandomCode(len);
            var element = document.getElementById(elementID);
            element.setAttribute("value", randomCode);
        }
        
        <!--复制elementID的内容到粘贴板-->
        function copyElementText2Clipboard(elementID) {
            <!--根据id拿到元素对象-->
            var element = document.getElementById(elementID);
            if(element == null){
                console.log("element is null, id:" + elementID);
                return;
            }            
            
            <!--获取元素内容文本-->
            var content = element.innerHTML;
            
            <!--复制到粘贴板-->
            if(element.tagName == "INPUT"){
                <!--如果是input就直接复制-->
                element.setSelectionRange(0, 64);<!--选择input中的第0个字符到64个字符，也就是最多选中32个字符-->
                element.select();<!--选中input的value-->
                var isCopyOk = document.execCommand("copy");<!--将当前选中的内容复制到粘贴板-->
                if(isCopyOk){
                    alert("已复制");
                }
            }            
            else
            {
                <!--创建一个临时的隐藏的input，并将它的value赋值为content，然后copy到粘贴板-->
                const input = document.createElement("input");<!--创建input-->
                input.setAttribute("readonly", "readonly");<!--设置为只读-->
                input.setAttribute("value", content);<!--设置input的value-->
                document.body.appendChild(input);<!--将input添加到body-->
                input.setSelectionRange(0, 64);<!--选择input中的第0个字符到64个字符，也就是最多选中32个字符-->
                input.select();<!--选中input的value-->
                var isCopyOk = document.execCommand("copy");<!--将当前选中的内容复制到粘贴板-->
                document.body.removeChild(input);<!--移除刚才临时添加的input-->
                if(isCopyOk){
                    alert("已复制");
                }
            }
            
        }
        
        <!--复制eSrcID的文本到eDestID-->
        function copyElmText(eSrcID, eDestID) {
            var elementSrc = document.getElementById(eSrcID);<!--获取元素1对象-->
            var elementDest = document.getElementById(eDestID);<!--获取元素1对象-->
            if(elementSrc == null){
                console.log("elementSrc:"+elementSrc+" is null.");
                return;
            }
            
            if(elementDest == null){
                console.log("elementDest:"+elementDest+" is null.");
                return;
            }
            
            <!--将元素2的value属性设置为元素1的文本 elementDest.setAttribute("value", elementSrc.innerHTML);在国瓷设置后设置成功但是显示不刷新-->            
            elementDest.value=elementSrc.innerHTML;
            
        }
    </script>
  </head>
  <body>
    <span>随机码</span>
    <input type="text" id='RandomCode' name="RandomCode" value="" readonly="readonly" />
    <input type='button' onclick='setRandomCode("RandomCode", "16")' title='生成随机码' value="生成随机码" />
    <input type='button' onclick='copyElementText2Clipboard("RandomCode")' title='复制随机码到粘贴板' value="复制随机码" />
    </br>
    </br>
    <span>地址</span>
    <input type="text" id='Addr' name="text1" value="test">
    <input type='button' onclick='copyElmText("defaultAddr", "Addr")' title='将括号内容填充到输入框' value="设为默认地址" />
    (<span id="defaultAddr" title="" >xxx省xxx市xxx县</span>)
    <input type='button' onclick='copyElementText2Clipboard("defaultAddr")' title='复制到粘贴板' value="复制" />
    </br>
    </br>
    <textarea id='textarea1' rows="20" cols="50">
    </textarea>
    <input type='button' onclick='javascript:document.getElementById("textarea1").value=""' title='清空内容' value="清空" />
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript中的class类详解

    JavaScript中的class类详解

    JavaScript 中的类（Class）是一种新的语言特性，它让我们可以使用面向对象编程的思想来更加方便地组织和管理代码。在本文中，我们将详细介绍 JavaScript 中的类特性，感兴趣的同学可以借鉴阅读
    2023-05-05
  • uni-app跨端自定义指令实现按钮权限操作

    uni-app跨端自定义指令实现按钮权限操作

    实现uni-app自定义指令按钮权限需要涉及到对于vue.config.js新增loader配置，基础正则知识，webpack的loader开发和调试，以及npm本地调试和发布，接下来就从了解这些前置知识开始，需要的朋友可以参考下
    2023-01-01
  • layui之数据表格--与后台交互获取数据的方法

    layui之数据表格--与后台交互获取数据的方法

    今天小编就为大家分享一篇layui之数据表格--与后台交互获取数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript中Promise的使用详解

    JavaScript中Promise的使用详解

    Promise，相信每一个前端工程师都或多或少地在项目中都是用过，毕竟它早已不是一个新名词。ES6中已经原生对它加以支持，在caniuse中搜索一下 Promise ，发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用 es6-promise 这个 polyfill 库来加以兼容。
    2017-02-02
  • 简单谈谈JavaScript寄生式组合继承

    简单谈谈JavaScript寄生式组合继承

    寄生组合式继承,是集寄生式继承和组合继承的有点与一身,主要是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,这篇文章主要给大家介绍了关于JavaScript寄生式组合继承的相关资料,需要的朋友可以参考下
    2021-08-08
  • 纯JavaScript实现实时反馈系统时间

    纯JavaScript实现实时反馈系统时间

    这篇文章主要介绍了纯JavaScript实现实时反馈系统时间的相关资料,需要的朋友可以参考下
    2017-10-10
  • JS实现的简单轮播图运动效果示例

    JS实现的简单轮播图运动效果示例

    这篇文章主要介绍了JS实现的简单轮播图运动效果,结合完整实例形式分析了javascript基于定时器动态修改页面元素属性的相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • JavaScript控制台的更多功能

    JavaScript控制台的更多功能

    这篇文章主要介绍了JavaScript控制台的更多功能，想了解控制台更多功能的同学，一定要看一下
    2021-04-04
  • JavaScript实现九宫格点击变色效果

    JavaScript实现九宫格点击变色效果

    这篇文章主要为大家详细介绍了JavaScript实现九宫格点击变色效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 使用layui 的layedit定义自己的toolbar方法

    使用layui 的layedit定义自己的toolbar方法

    今天小编就为大家分享一篇使用layui 的layedit定义自己的toolbar方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论