jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能

【目录】

明确需求

html分析

代码实现

css分析

js分析

代码实现

只要是文本，长按选中就可以复制，但是需求来了挡也挡不住：

明确需求

为了提升用户体验，点击【复制】按钮就自动复制到剪贴板，那么就需要前端实现这种功能了。

首先明确了需求就先看一下最终图片：

copy.jpg

html分析

左边是一个input的文本框，只读，右边是一个按钮。

代码实现：

复制

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.innerHTML = text;

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_韵七七