借助输入框实现复制

注意事项：移动端（ios）复制时，此方法会唤起键盘

写法一： html内写一个隐藏的input

    <!-- input框不能隐藏 可通过样式挪到屏幕外 --><input type="text" name="copyInput" id="copyInput" ng-model="copyvalue"style="position: absolute;left:-100px;bottom:-100px"><button ng-click="doCopy(copyvalue);">一键复制</button>

/*** 复制*/
doCopy(value) {const input = document.querySelector('.copyInput');input.value = value;// 选中赋值过的inputinput.select();document.execCommand('Copy');alert('复制成功');
}

写法二：用js创建input

实测：android机功能正常；ios首次点击正常，再次点击依然会唤起键盘

/*** 复制*/
doCopy(value) {const oInput = document.createElement('input');oInput.value = value;document.body.appendChild(oInput);oInput.select();document.execCommand('Copy');// removeChild ios无法复制// oInput.parentNode.removeChild(oInput);oInput.style.display = 'none';console.log('复制成功');
}

原文链接：js实现一键复制 https://www.cnblogs.com/qiufang/p/8987084.html

插件clipboard.js实现复制功能

引入插件包 https://github.com/zenorocha/clipboard.js/

// 下载插件
npm install clipboard --save// 引入clipboard/dist/clipboard.min.js
window.ClipboardJS = require('clipboard/dist/clipboard.min');

<div class="btn-copy"data-clipboard-text={{value}}ng-click="$ctrl.doCopy()">复制
</div>

/*** 复制*/
doCopy() {const clipboard = new ClipboardJS('.btn-copy');clipboard.on('success', (e) => {alert('复制成功');e.clearSelection();});clipboard.on('error', (e) => {alert('请手动选择文本复制');console.log('Trigger:', e.trigger);});
}

官网更多用法： https://github.com/zenorocha/clipboard.js/

【angular】实现一键复制的几种方法相关推荐

php控制windows系统关机,window_winXP系统设置一键关机的两种方法，windows系统关机需要三步，对我 - phpStudy...
winXP系统设置一键关机的两种方法 windows系统关机需要三步,对我这样的懒人来说实在不方便.在网络上寻找了许多方法,最后用了一个.现在介绍给有需要的人.关机方法是鼠标一点关机或热键关机. 创建 ...
linux中复制字符串出错,C语言实现字符串的复制的两种方法
本文将要为您介绍的是C语言实现字符串的复制的两种方法,具体操作方法: 利用数组实现 1 #include 2 #include 3 4 void copy_string(char str1[],cha ...
【转】C#中数组复制的4种方法
C#中数组复制的4种方法 from:http://blog.csdn.net/burningcpu/article/details/1434167 今天旁边的同事MM叫我调了一段程序,她想复制一个数组 ...
java 数组效率_java数组复制的四种方法效率对比
有关数组的基础知识,有很多方面,比方说初始化,引用,遍历,以及一维数组和二维数组,今天我们先看看数组复制的有关内容. 来源于牛客网的一道选择题: JAVA语言的下面几种数组复制方法中,哪个效率最高? ...
字符串复制的两种方法
字符串复制的两种方法 /*用字符数组实现字符串的复制*/ int main() {char a[] = "I am a boy.", b[20] = { 0 };int i;for ...
WordPress文章防复制的三种方法
原文地址 WordPress文章如何防复制三种方法 - 方包博客 - java|python|前端开发|运维|电商|ui设计有的时候我们非常烦恼,我们好不容易辛辛苦苦写的一篇文章,自己的站还没收录呢 ...
angular 字符串转换成数字_3种方法搞定Excel中数字大小写转换？ 123...变为壹贰叁......
作者 | 雷哥编辑 | 小西瓜职场中,大家是否遇到这样的情况, 需要把数字"1,2,3......" 转换为大写的"壹贰叁...",大家都有哪些方法可以实 ...
python怎么复制字符串_python字符串复制的几种方法
>>> list1 = [1,2] >>> id(list1) 50081032 >>> list2 = list1.copy() >> ...
对象复制的7种方法，还是Spring的最好用！
日常编程中,我们会经常会碰到对象属性复制的场景,就比如下面这样一个常见的三层 MVC 架构. 当我们在上面的架构下编程时,我们通常需要经历对象转化,将业务请求流程经历三层机构后需要把 DTO 转为DO ...

【angular】实现一键复制的几种方法

实现一键复制的几种方法

借助输入框实现复制

插件clipboard.js实现复制功能

【angular】实现一键复制的几种方法相关推荐

最新文章

热门文章