【目录】
明确需求
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 —— /5/6,首次创建实现前端点击按钮自动复制剪贴板功能
©burning_韵七七