js 点击复制操作

这个操作搞了好久,解决起来好简单。。。

大部分摘抄出自这里https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

 1 <p>点击复制后在右边textarea CTRL+V看一下</p>
 2 <input type="text" id="inputText" value="测试文本" disabled=‘disabled‘/>
 3 <input type="button" id="btn" value="复制"/>
 4 <textarea rows="4"></textarea>
 5 <script type="text/javascript">
 6     var btn = document.getElementById(‘btn‘);
 7     btn.addEventListener(‘click‘, function(){
 8         var inputText = document.getElementById(‘inputText‘);
 9         inputText.removeAttribute("disabled")
10         var currentFocus = document.activeElement;
11         inputText.focus();
12         inputText.setSelectionRange(0, inputText.value.length);
13         document.execCommand(‘copy‘, true);
14         currentFocus.focus();
15         inputText.setAttribute("disabled","disabled")
16     });
17 </script>

为什么要加disabled 因为项目中不允许用户来修改,但是加完之后点击会没有效果所以在点击时先移除disabled属性后在加

大概就是这个样子。

主要还是execCommand()方法

时间: 2024-10-17 01:22:51

js 点击复制操作的相关文章

JS 点击复制Copy插件--Zero Clipboard

写博客就是一周工作中遇到哪些问题,一个好处就是可以进行一个总结,另外一个好处就是下次遇到同样的问题即使那你记不住,也可以翻看你的博客解决了.同样也可以帮到别人遇到与你一样问题的人.或者别人有比你更好的解决办法,可以一起讨论,分析出更好的解决方法.所以这是个好习惯.既然是好习惯,那就得坚持. 但是想写好一篇博客好像不是那么容易的,因为你得有问题,不然你写什么,手放在键盘上不知道敲啥.或者是你自己主动学习了,对你的学习进行了总结.然后你得有得写. 这周公司同事分享的<贝叶斯方法>对我的感触挺大的.

JS 点击复制Copy

1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 var Url2=document.getElementById("biao1"); 5 Url2.select(); // 选择对象 6 document.execCommand("Copy"); // 执行浏览器复制命令 7 alert("已复制好,可贴粘.&

牛角尖之js:点击复制

前两日学习中,想要在随笔中实现一个功能:代码放在一个textArea区域中,下方有操作按钮,可以实现:1.点击运行 2.点击全选 3.点击复制. 点击运行和点击全选好实现,也容易实现浏览器间的兼容性,但是在点击复制时,在360浏览器7(2015.7.xp系统和win7 64位系统下)中无法实现点击复制.通过查询,此版浏览器应该是chrom核心.钻了两天牛角尖,还是没弄出来,估计知识储备没到,总结一下过程,等以后解决: 一.先是在网上找了一些兼容代码,IE可用,不过360浏览器(版本及环境见上)无

JS 点击复制按钮 将文字复制到手机剪贴板

我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有的需要安装flash,但是这些对于手机等移动设备都不太合适,那么有没有一个简单点的办法呢? 今天,我们就来介绍一个简单实用的好方法: ①首先,我们把需要复制的部分 做成一个readonly的input, ②复制按钮的id 我这里设置成:js-copy-text, ③js如下: <script> $

js点击复制,复制你想复制的内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

JS点击复制

<!DOCTYPE html><html><head> <script type="text/javascript"> function copyUrl2() { var Url2 = document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert(&q

js 点击复制文字

复制input里面的文字 html: <input id="content" class="form-control" type="text" value="dddd"> <input type=button value="复制" onclick="jsCopy()"> js: function jsCopy(){ var e=document.getElemen

js 点击复制内容

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试实例</title> <script> function myFunction(message) { var input = document.createElement("input"); input.value = message; document.bod

记录使用clipboard.js实现点击复制链接到剪切板的历程

记录使用clipboard.js实现点击复制链接到剪切板的历程 前几天接到一个任务,让实现当用户在首页点击按钮(说是按钮,只是外观是按钮,其实是一个a标签)时弹出弹窗告诉用户已经复制了活动链接,同时将链接复制到用户的剪切板中. 听起来贼简单的功能,分任务的时候甚至有人说就1,2行代码就搞定了.于是这简单的任务就给了我(菜鸟实习生  =-=),我真是信了你的邪~~!. 在我做的时候,才发现,听起来挺简单的任务,但是如果要实现对不同浏览器兼容,其实并不简单. 列举一下我找到的各种实现方法吧: 1.d