iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Webjs实现复制文本到粘贴板
  • 348
分享到

Webjs实现复制文本到粘贴板

2024-04-02 19:04:59 348人浏览 独家记忆
摘要

本文实例为大家分享了WEB js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一、简述 记--简单用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Webjs实现复制文本到粘贴板

本文链接: https://www.lsjlt.com/news/165744.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Webjs实现复制文本到粘贴板
    本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一、简述 记--简单用js实现将元素的文本内容复制到粘贴板。 二、效果 三、代码 <...
    99+
    2024-04-02
  • js复制文本到粘贴板(Clipboard.writeText())
    目录复制文本到粘贴板(Clipboard.writeText())网上的代码clipboard.jsClipboard.writeText()复制内容到剪贴板(无插件,兼容所有浏览器...
    99+
    2024-04-02
  • vue实现点击复制到粘贴板
    本文实例为大家分享了vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyTex...
    99+
    2024-04-02
  • jQuery如何实现复制到粘贴板功能
    这篇文章主要为大家展示了“jQuery如何实现复制到粘贴板功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现复制到粘贴板功能”这篇文章吧。用...
    99+
    2024-04-02
  • JS代码如何实现粘贴板复制功能
    这篇文章将为大家详细讲解有关JS代码如何实现粘贴板复制功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用剪贴板是一项基本技能。作为码农都应知道, Tab , Ctrl...
    99+
    2024-04-02
  • Vim如何实现复制粘贴
    这篇文章将为大家详细讲解有关Vim如何实现复制粘贴,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近使用Vim来写博客,发现在Vim中粘贴Python代码后,缩进就全乱了。仔细研究了以下,原来是自动缩进的...
    99+
    2023-06-13
  • ubuntu如何实现复制粘贴
    ubuntu实现复制粘贴的方法:在KDE/Gnome下:复制命令:Ctrl + C粘贴命令:Ctrl + V在终端下:复制命令:Ctrl + Shift + C 组合键粘贴命令:Ctrl + Shift + V 组合键在控制台下:复制命令:...
    99+
    2024-04-02
  • 使用Office剪贴板进行复制和粘贴
    使用Office剪贴板进行复制和粘贴可以帮助提高您在Office程序中的工作效率。以下是使用剪贴板进行复制和粘贴的步骤:1. 打开要...
    99+
    2023-09-13
    Office
  • 关于pycharm中缩进、粘贴复制等文本
    有可能是同时安装了vim,冲突导致: 在seetings中点击Plugins,搜索vim卸载后功能恢复   ...
    99+
    2023-01-31
    文本 pycharm
  • js 剪切、复制、粘贴功能实现
    针对现代浏览器实现(Navigator.clipboard) Navigator.clipboard API可以用来访问系统剪贴板,可以实现【剪切、复制、粘贴】功能。该 API 被设...
    99+
    2023-05-18
    js 剪切 js复制 js粘贴
  • javaScript如何实现复制粘贴功能
    小编给大家分享一下javaScript如何实现复制粘贴功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • python怎么复制粘贴文件
    在Python中,可以使用shutil模块中的copy函数来复制文件,如下所示:```pythonimport shutilsrc ...
    99+
    2023-08-30
    python
  • vue如何实现粘贴复制功能
    这篇文章主要介绍了vue如何实现粘贴复制功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。引言项目中如果实现粘贴复制功能,目前市面上共有三种方法,均有利有弊,大家可以根据自己...
    99+
    2023-06-29
  • 无法从Excel复制并粘贴到Access
    如果你无法将Excel中的数据复制并粘贴到Access中,可能有几个原因:1. 格式不兼容:确保你尝试复制的数据与Access中的目...
    99+
    2023-09-14
    Excel
  • JS怎么实现粘贴板功能
    小编给大家分享一下JS怎么实现粘贴板功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!使用剪贴板是一项基本技能。作为码农都应知道...
    99+
    2024-04-02
  • 怎么用vbscript实现将脚本的输出复制到剪贴板
    本篇内容主要讲解“怎么用vbscript实现将脚本的输出复制到剪贴板”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用vbscript实现将脚本的输出复制到剪贴板”吧!代码如下:strCopy...
    99+
    2023-06-08
  • 怎么用python实现复制粘贴功能
    这篇文章主要介绍“怎么用python实现复制粘贴功能”,在日常操作中,相信很多人在怎么用python实现复制粘贴功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用python实现复制粘贴功能”的疑惑有所...
    99+
    2023-06-08
  • windows caj文件如何复制粘贴
    今天小编给大家分享一下windows caj文件如何复制粘贴的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。caj文件复制粘贴...
    99+
    2023-07-04
  • 如何用python实现复制粘贴功能
    目录楔子实现复制实现粘贴macOS实现复制粘贴Linux实现复制粘贴楔子 pandas里面有这么一个方法:pd.read_clipboard,可以根据你复制的内容生成DataFra...
    99+
    2024-04-02
  • React实现监听粘贴事件并获取粘贴板中的截图
    目录监听粘贴事件并获取粘贴板中的截图TSX中给组件添加监听粘贴事件从粘贴板获取截图文件React监听事件事件监听绑定的事件函数相关扩展监听粘贴事件并获取粘贴板中的截图 TSX中给组件...
    99+
    2022-11-13
    React监听粘贴事件 React粘贴板截图 React监听事件
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作