[目录]
明确需求
html 分析
代码实现
CSS 分析
js 分析
代码实现
只要是文本, 长按选中就可以复制, 但是需求来了挡也挡不住:
明确需求
为了提升用户体验, 点击 [复制] 按钮就自动复制到剪贴板, 那么就需要前端实现这种功能了.
首先明确了需求就先看一下最终图片:
copy.jpg
html 分析
左边是一个 input 的文本框, 只读, 右边是一个按钮.
代码实现:
- <!-- 左边是一个 input 输入框, 要求只读, 而且里面的内容通过 url? 后面的 code 传入 -->
- <input type="text" value="AJS4EFS" readonly id="textAreas"/>
- <!-- 右边是一个按钮 -->
- <a href="javascript:;" class="cuteShareBtn" id="copy"> 复制 </a>
css 分析
这种东西就跳过吧, 不是重点.
js 分析
点击按钮获取 input 对象
解决方法:
如果使用的 jquery, 那么直接 $("#textArea").select() 选中的就是这个 input 对象
如果使用的 zepto, 上面的方法是获取到的 zepto 对象是不支持原生 select() 方法的, 那么就使用原生的办法
- var obj = document.getElementById("textAreas");
- obj.select();
然后复制到剪贴板
两行? 看起来是不是很简单? 哈哈~ 那你就错了, 这里面是有坑的.
第一目前没有一个很完美的方法可以兼容各个浏览器和移动端, 引用插件也是一样的.
查了半天最好的办法就是使用 document.execCommand("Copy")
兼容性是不错的:
use1.jpg
use.jpg
手机安卓支持到 4.1, 各种浏览器是可以的, 但是唯独 ios 是不支持的, 来给我把刀, ios 你这玩意你限制是干什么? 是要保护手机安全还是咋的.
所以只是 pc 端 使用那么就下面几行代码就可以搞定了:
- // 复制按钮事件绑定
- $("#copy").on("tap",function(){
- // 获取 input 对象
- var obj = document.getElementById("textAreas");
- // 选择当前对象
- obj.select();
- try{
- // 进行复制到剪切板
- if(document.execCommand("Copy","false",null)){
- // 如果复制成功
- alert("复制成功!");
- }else{
- // 如果复制失败
- alert("复制失败!");
- }
- }catch(err){
- // 如果报错
- alert("复制错误!")
- }
- })
那如果是移动端 的话, 就要兼容 IOS, 但是依然在 iPhone5 的 10.2 的系统中, 依然显示复制失败, 由于用户使用率较低, 兼容就做到这里, 那些用户你们就自己手动复制吧.
下面的两种方法都可以进行复制, 因为核心代码就那么几行, 先来简单的:
- $("#copy").on("tap",function(){
- // 获取 input 对象
- var obj = document.getElementById("textAreas");
- // 如果是 ios 端
- if(isiOSDevice){
- // 获取元素内容是否可编辑和是否只读
- var editable = obj.contentEditable;
- var readOnly = obj.readOnly;
- // 将对象变成可编辑的
- obj.contentEditable = true;
- obj.readOnly = false;
- // 创建一个 Range 对象, Range 对象表示文档的连续范围区域, 如用户在浏览器窗口中用鼠标拖动选中的区域
- var range = document.createRange();
- // 获取 obj 的内容作为选中的范围
- range.selectNodeContents(obj);
- var selection = window.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
- obj.setSelectionRange(0, 999999); // 选择范围, 确保全选
- // 恢复原来的状态
- obj.contentEditable = editable;
- obj.readOnly = readOnly;
- // 如果是安卓端
- }else{
- obj.select();
- }
- try{
- if(document.execCommand("Copy","false",null)){
- alert("复制成功!");
- }else{
- alert("复制失败! 请手动复制!");
- }
- }catch(err){
- alert("复制错误! 请手动复制!")
- }
- })
下面是一个比较完整的升级版方法, 和插件 Clipboard.js 一样, 不过代码不多, 就直接拿来用好了.
这个获取的不是 input 对象, 而是需要复制的内容.
- // 定义函数
- window.Clipboard = (function(window, document, navigator) {
- var textArea,
- copy;
- // 判断是不是 ios 端
- function isOS() {
- return navigator.userAgent.match(/ipad|iphone/i);
- }
- // 创建文本元素
- function createTextArea(text) {
- textArea = document.createElement('textArea');
- textArea.value = text;
- document.body.appendChild(textArea);
- }
- // 选择内容
- function selectText() {
- var range,
- selection;
- if (isOS()) {
- range = document.createRange();
- range.selectNodeContents(textArea);
- selection = window.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
- textArea.setSelectionRange(0, 999999);
- } else {
- textArea.select();
- }
- }
- // 复制到剪贴板
- function copyToClipboard() {
- try{
- if(document.execCommand("Copy")){
- alert("复制成功!");
- }else{
- alert("复制失败! 请手动复制!");
- }
- }catch(err){
- alert("复制错误! 请手动复制!")
- }
- document.body.removeChild(textArea);
- }
- copy = function(text) {
- createTextArea(text);
- selectText();
- copyToClipboard();
- };
- return {
- copy: copy
- };
- })(window, document, navigator);
使用函数
- // 使用函数
- $("#copy").on("tap",function(){
- var val = $("#textAreas").val();
- Clipboard.copy(val);
- });
这样就实现了前端点击按钮自动复制剪贴板的功能.
version1.0 -- 2018/5/6, 首次创建实现前端点击按钮自动复制剪贴板功能
©burning_韵七七
来源: http://www.jianshu.com/p/cc1eed9a942d