js 点击复制操作

Posted 2020-09-28 红鲤鱼与绿鲤鱼

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

大部分摘抄出自这里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>

View Code

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

大概就是这个样子。

主要还是execCommand()方法