精华内容
下载资源
问答
  • 原生js复制功能

    2019-02-16 17:48:32
    cope_input_btn() { let copyHttps = document.querySelector(’#btn’); let ranges = document.createRange(); //创建一个范围的对象 ranges.selectNode(copyHttps);... //执行复制的命令 }

    cope_input_btn() {
    let copyHttps = document.querySelector(’#btn’);
    let ranges = document.createRange(); //创建一个范围的对象
    ranges.selectNode(copyHttps); //选择范围内容
    window.getSelection().removeAllRanges(); //移除剪切板中其他的东西
    window.getSelection().addRange(ranges); //把范围添加进剪切板
    document.execCommand(‘copy’); //执行复制的命令
    }

    展开全文
  • 原生js复制内容

    2021-01-18 17:18:07
    function copyUrl(url) { let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput);... // 执行浏览器复制命令 oInput.className = 'oInput'; oInput
    function copyUrl(url) {
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
    }
    
    展开全文
  • 场景:在table行有一个按钮实现复制功能,但是和行点击事件冲突了,加个@click.stop?? cliboard插件官方文档感觉介绍太少了,查了半天资料,我感觉这是挺常用的场景啊,网上也没啥解决方案,这插件不大行啊[doge]...

    场景:在table行有一个按钮实现复制功能,但是和行点击事件冲突了,加个@click.stop??

    cliboard插件官方文档感觉介绍太少了,查了半天资料,我感觉这是挺常用的场景啊,网上也没啥解决方案,这插件不大行啊[doge]

    因为每一行都有这个按钮,用了css选择器,这样娶不到event

    copyListen() {
          this.clipboard = new ClipboardJS('.copy-json', {
            text: trigger => {
                return '我是复制内容'
            }
          })
          this.clipboard.on('error', e => {
            this.$message.error('代码复制失败')
          })
        },

    这样可以,但是阻止不了冒泡

    点击事件加了stop修饰这个插件就失效了,,,事件委托(cliboard插件机制)是基础基于事件冒泡的

     

     

    只能用原生js,但是input框当用户看不见时是不能复制的(浏览器安全规范),v-show,display不行,position定位其实可以,但是占地方(也可以再把宽度调小)

    然后就和无良广告商学了一套

    toCopy(jsonContent) {
          if (jsonContent) {
            ......
            this.fakeElem = document.createElement('textarea')
            this.fakeElem.value = jsonContent
            document.body.appendChild(this.fakeElem)
            this.fakeElem.select()
            if (document.execCommand('Copy')) {
              this.$notify.success('复制成功')
            } else {
              this.$notify.error('复制失败')
            }
            if (this.fakeElem) {
              document.body.removeChild(this.fakeElem)
              this.fakeElem = null
            }
          }...
        },

    参考:https://www.yuque.com/sanyuebuzhichun/xon2xr/ny150b

    展开全文
  • js 原生js复制到粘贴板

    千次阅读 2020-04-14 17:36:21
    纯元素JavaScript 无插件 无须服务器 知识点: createTextRange//ie 创建TextRange 对象 createRange//非ie 创建Range 对象 Range 对象 execCommand//允许用户对当前文档、当前选中区域或者给定范围执行一个浏览器...

    优点:

    • 代码少
    • 纯元素JavaScript
    • 无插件
    • 无须服务器

    知识点:

    createTextRange//ie 创建TextRange 对象
    createRange//非ie 创建Range 对象
    Range 对象
    execCommand//允许用户对当前文档、当前选中区域或者给定范围执行一个浏览器内部命令
    element.select()//Input Text select()方法;选取文本域的内容

    Demo:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>js 原生js复制到粘贴板</title>
    	</head>
    
    	<body>
    		<div id="swq1">copy1原理:
    			<p>利用 createTextRange 或 createRange 选择目标节点的内容;</p>
    			<p>调用 document.execCommand("Copy") 复制已选内容;</p>
    			<p>createTextRange 或 createRange 不支持 input, textarea 元素;</p>
    		</div>
    		<textarea cols="20" rows="10" id="swq2">
    			copy2原理:
    			对目标节点使用 element.select();
    			document.execCommand("Copy");
    			element.select() 仅支持 input, textarea 元素;
    		</textarea>
    		<div id="swq3">copy3原理:
    			<p>新建一个 textarea 或 input元素</p>
    			<p>在节点中插入目标文本内容</p>
    			<p>将节点插入body</p>
    			<p>element.select() + document.execCommand("Copy");(同copy2原理)</p>
    			<p>删除节点</p>
    		</div>
    
    		<input type="button" onClick="copy1()" value="copy1" />
    		<input type="button" onClick="copy2()" value="copy2" />
    		<input type="button" onClick="copy3()" value="copy3" />
    
    		<script type="text/javascript">
    			function copy1() {
    				var element = document.getElementById("swq1")
    				if(document.body.createTextRange) {
    					// ie
    
    					// 创建Range对象
    					let range = document.body.createTextRange();
    
    					// range 移动到指定对象
    					range.moveToElementText(element);
    
    					// 选择对象的内容
    					range.select();
    
    					// 复制内容
    					document.execCommand("Copy");
    				} else if(window.getSelection) {
    					// 非ie
    
    					// 返回一个 Selection 对象, 选择的文本范围或光标的当前位置
    					let selection = window.getSelection();
    
    					// 创建Range对象
    					let range = document.createRange();
    
    					// selectNodeContents 选择节点的子节点
    					// selectNode 选择整个节点
    					range.selectNodeContents(element);
    
    					// 清空 range
    					selection.removeAllRanges();
    
    					// 加入目标 range
    					selection.addRange(range);
    
    					// 复制内容
    					document.execCommand("Copy");
    				} else {
    					alert("当前浏览器不支持复制功能");
    				}
    			}
    
    			function copy2() {
    				var ele = document.getElementById("swq2");
    				ele.select();
    				document.execCommand("Copy");
    			}
    
    			function copy3() {
    				let textArea = document.createElement('textarea');
    				textArea.value = document.getElementById("swq3").innerHTML;
    				document.body.appendChild(textArea);
    				textArea.select();
    
    				try {
    					document.execCommand('Copy');
    				} catch(err) {
    					console.log('当前浏览器不支持复制功能');
    				}
    
    				document.body.removeChild(textArea);
    			}
    		</script>
    	</body>
    
    </html>
    

    参考资料:

    end

    展开全文
  • 原生js复制到剪切板

    2019-09-17 17:31:54
    // 点击按钮调用复制 function copyBtn() { copyText($("#testbtn").val(), function () {alert('复制成功')}); } // 复制的方法 function copyText(text, callback...
  • // 点击复制 closes2.onclick = function () { // 微信号 var mobileText = document.getElementById("mobileText"); // console.log(mobileText.... // 执行浏览器复制命令 closes1.style.display = "none"; }
  • 使用原生 js 复制内容到剪贴板

    千次阅读 2018-06-19 19:46:02
    function copy (str) { let oInput = document.createElement( 'input' ) oInput.value = str document.body.appendChild(oInput) oInput.select() document.execCommand( ...'复制成功' ) }
  • 代码: function copyHandle(){ let copy = (e)=>{ e.preventDefault() ... e.clipboardData.setData('text/plain',page) ... this.$message.success('复制成功') document.removeEvent...
  • 使用 JS 实现复制功能并不是很难,但是有几个需要注意的地方。 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本。 另外如果将 input 设置为 `type="hidden" 或者 ...
  • 本来看到这个问题,以为很...后来通过查资料,发现js提供了拖拽的事件方法。 现在把简单实现的方法整理如下,以备参考: <!DOCTYPE html /> <html> <head> <title>drag image</titl...
  • 原生JS实现复制

    2021-08-23 18:03:05
    使用原生JS实现复制文本 原理:利用textarea标签和document.execCommand(‘Copy’); 直接上代码: <span id="authorization" @click="handleCopy">复制内容</span> <textarea id="input_copy" style...
  • js原生代码复制

    2019-10-08 19:33:12
    function copy ( attrs ) { ...// 已复制 ...// 复制失败,请手动复制 } if ( attr ) { target . parentElement . removeChild ( target ) ; } return false ; }
  • 原生JS实现复制功能

    2021-04-21 11:14:01
    所以这里就具体的介绍原生 JS复制方法 let oInput = document.createElement("input") oInput.value = this.hostUrl // 这里记录的就是需要保存的值 document.body.appendChild(oInput) oInput.
  • 原生JS制作复制按钮

    2019-07-10 16:40:11
    原生JS制作复制按钮 document.querySelector('button').onclick = function() { var copyContent = document.createElement('textarea'); // copyContent.setAttribute('readonly', 'readonly'); copyContent.in....
  • 原生 JS 监听 复制 copy 事件,追加版权信息 <div class="empty-font">空心字</div> <script type="text/javascript"> //监听整个页面的 copy 事件 document.addEventListener('copy',function...
  • 原生js实现复制功能

    2021-02-18 17:57:38
    (以下style为了 不显示输入框) <input id="copytext" value='' style=" position: fixed; width: 5px;...JS function copyTest(){ var input = document.getElementById("copytext"); .
  • 以前复制这东西都是通过flash,包括现在很多...其实js也可以实现复制纯文本,是指需要借助input标签,如下://复制网站地址 copyUrl () { let oInput = document.createElement('input') // 生成一个节点 oInput....
  • 原生js复制input的内容到剪切板 function copyUrl() { var Url=document.getElementById(“wxurl”);//获取到dom对象 Url.select(); // 选择 document.execCommand(“Copy”); // 执行浏览器复制命令 } vue复制内容...
  • 原生js实现复制

    2019-08-06 07:25:03
    最后我的解决方案是,在页面中添加一个 div,手动写入内容innerHTML,然后把它隐藏掉 function copy(targetDom) { let ...复制代码 转载于:https://juejin.im/post/5d492adff265da03e05afa9d
  • 原生JS实现复制图片和文本内容

    千次阅读 2020-01-06 00:49:33
    关于JS操作剪贴板的那些事原生JS实现复制Range介绍使用getSelection介绍使用execCommandcopy代码 最近开发上有个需求是要实现一键复制图片的功能,查阅了相关资料后发现有几种可以实现的方式,但总体而言网上的信息...
  • js原生实现复制

    2019-11-13 13:39:50
    1:非input框的复制方式 动态创建input元素的方式实现复制 copyCode: function (val,e) { let input = document.createElement('input'); input.setAttribute('readonly', 'readonly');//可设可不设 input....
  • 原生JS:复制内容到剪切板1. JS函数2. 说明 实现功能:复制文本到剪切板 使用场景: Javascript 1. JS函数 function copy2clipboard(value) { let copyInput = document.createElement("input"); copyInput.type ...
  • 原生 js 实现点击按钮复制文本

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,379
精华内容 14,551
关键字:

原生js复制