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>

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

(0)

相关推荐

  • js复制文本到粘贴板(Clipboard.writeText())

    目录 复制文本到粘贴板(Clipboard.writeText()) 网上的代码 clipboard.js Clipboard.writeText() 复制内容到剪贴板(无插件,兼容所有浏览器) 复制文本到粘贴板(Clipboard.writeText()) js如何复制文本到粘贴板呢,网上所说的各种复制..在Chrome或者说在我这个项目都没用. windows.copy document.execCommand(“copy”); clipboard.js Clipboard.writeTex

  • JS复制对应id的内容到粘贴板(Ctrl+C效果)

    前言 最近在做一个按钮,实现的效果是当点击后复制url到黏贴板,但不是当前页面url,而是对应一个元素的url,且一个页面会有多个url.一开始找到一个方法,但是竟然只兼容IE浏览器,神奇了,竟然有只兼容IE的东西.后来发现一个zeroclipboard.js这个插件,但是怎么也搞不出那个效果,有点麻烦. 最后翻到了一个js封装好的方法,有效! 想要实现的一个效果是,下面html代码: <tr> <td> <a id="copy_{$key}" oncli

  • js 实现复制到粘贴板的功能代码

    他主要有两个参数:第一个是设置要复制的是一段文本,第二个参数是要复制具体的内容,这个内容可以从文本框中或使用innerHTML获取. 简单的实例代码: 复制代码 代码如下: <script type="text/javascript"> function copyData() { var copyText = document.getElementById("ctl00_cpRight_txtUrl").value; window.clipboardDa

  • js实现点击图片将图片地址复制到粘贴板的方法

    本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

  • JS复制特定内容到粘贴板

    <script language="javascript"> function readTxt() { alert(window.clipboardData.getData("text")); } function setTxt() { var t=document.getElementById("txt"); t.select(); window.clipboardData.setData('text',t.createTextRa

  • H5 js点击按钮复制文本到粘贴板

    本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

  • 20行JS代码实现粘贴板复制功能

    使用剪贴板是一项基本技能.作为码农都应知道, Tab , Ctrl/Cmd + A , Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分别是自动聚焦.复制.粘贴的快捷键. 而对普通用户可能就不太容易了.即使用户知道剪贴板是什么,(除了)那些眼神极好或反应很快的人,其他情况下很难以突出显示他们想要的确切文字.若用户不知道键盘快捷键,也看不到隐藏的编辑菜单,或从未使用右键菜单或不知道长按触屏弹出选项菜单,那么他很可能无法察觉到复制功能. 那么我们是否应该提供一个"复制到剪贴板&q

  • 基于js实现复制内容到操作系统粘贴板过程解析

    一.如果只考虑IE浏览器,可以直接用原声js实现(兼容IE.谷歌.火狐等浏览器) if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将需要复制的内容复制到操作系统粘贴板 window.clipboardData.setData("Text", "要复制的内容"); } 二.如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板. 这里需要

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

    本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一.简述 记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果 三.代码 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>js复制内容到粘贴板</title>     <script type="text/j

  • vue 实现复制内容到粘贴板clipboard的方法

    1 . npm安装到项目目录文件中 npm install clipboard --save 2 . import 引入文件 import Clipboard from 'clipboard'; 3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容 <button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="

  • node.js实现复制文本到剪切板的功能

    前言 最近在工作中遇到一种需求:我需要请求后端数据,但请求数据前需要登陆,获得一个token.登陆方式是向一个json地址post数据即可.之前我的做法是,用chrome插件postman来实现登陆动作.但后来无意中发现,postman内存占用超高!即使我并没有使用它.这让我很不爽. 后来一想,实现这么简单的一个动作,用这么重的插件,对于我这样一个会nodejs的前端程序员是不是太Low了?简直不好意思对人讲自己会nodejs! 于是我就花了点时间写了个简单的脚本.本文记录一下开发过程. 实现思

  • js实现点击按钮复制文本功能

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板 但是 select() 方法只对 <input>

  • vue实现点击复制到粘贴板

    本文实例为大家分享了vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyText() {       const oInput = document.createElement('input')       oInput.value = this.textarea       document.body.appendChild(oInput)       oInput.select()    

随机推荐