【www.bbyears.com--js教程】
然后造轮子的路上是痛苦的, 各种兼容问题, 各种事件, 哎, 也罢, 最终也成了... 感谢 张鑫旭 - js+flash(as3)实现复制文字 让我有的思路...
看一下效果图
目前测试兼容ie6+,谷歌,火狐等...当然我是用ietester测的... 有问题直接联系我吧.. 谢谢
当前接口API:
代码如下/**
* 复制文字
* 突然觉得不知道用空间是对还是错...
* @todo 要做显示,隐藏的接口
* @example
* 1, 单个节点复制
* msc.tools.copy({
* id:"#id",
* str:"要复制的内容"
* });
*
* 2, 多个节点复制
* msc.tools.copy({
* id:"#id .copy",
* copy:"111"
* });
* 3, 动态获取值
* msc.tools.copy({
* id:"#id",
* copy:function(){
* return this.getAttribute("data-value");//this为当前的dom
* }
* });
* 4, 外部设置内容
* msc.tools.copy({
* id:"#text"
* });
*
* msc.tools.copy("#text", "我要复制") === msc.tools.copy({id:"#test", str:"我要复制"})
* 5, 移除实例
* msc.tools.copy.remove(str||ele||jquery);//支持移除数组对象
* 6, 配置参数
* config.id 选择器, 支持多个, dom,jquery,str
* config.str 要复制的内容, 支持fn, this指向当前的dom
* config.path swf路径
* config.success 成功回调, 回调参数为复制的内容, this指向当前的dom
* config.mouseover, mouseout, mousedown, mouseup 四个事件, this指向当前的dom
*
*
*/
完整例子
代码如下
words" content="">
谢亮复制组件, 目测是支持ie6+
感谢以下作者的源码提供思路:
zclip | 张鑫旭 - js+flash(as3)实现复制文字内容到剪切板
如有bug, 请联系 qq463004799, 目前为公司组件, 优化代码后会公开(当然你现在也可以用, 只是...)
下面来看看吧...
多个复制
测试1
测试2
测试3
注: 以上复制他们的innerHTML
一个复制
学习吧, 嘎嘎
复制
注: 以上复制固定的内容: 学习吧
外部动态复制
复制下面框框里的
事件机制
来试试吧
移除事件
复制
把复制干掉
外部按钮设置复制内容
复制
设置内容为 谢亮+0
<script type="text/javascript" src="http://homecp.meishichina.com/v6/js/lib/??jquery.js,jquery-easing.js,jquery-delayHover.js,jquery-tab.js,jquery-imgLoad.js,msc.js,msc-event.js,msc-ui-dialog.js,msc-goTop.js,msc-template.js,msc-user.js,ping.js,ga.js?20140401"></script>
<script type="text/javascript" src="msc-tools-copy.js"></script>
<script type="text/javascript">
var copy = msc.tools.copy;
var successFn = function(str){
msc.ui.dialog.success("成功 = "+ str)
}
//demo1
copy({
id:"#demo_1 .ui_btn_blue",
str: function(){
return this.innerHTML;
},
success: successFn
});
//demo2
copy({
id:"#demo_2 .ui_btn_blue",
str: "学习吧",
success: successFn
});
//demo3
var $demo3 = $("#demo_3");
copy({
id: $demo3.find("a.ui_btn_blue"),
str: function(){
return $demo3.find("textarea").val();
},
success: successFn
});
//demo4
var $demo4 = $("#demo4"),
$text4 = $demo4.find(".text");
copy({
id: $demo4.find("a.ui_btn_blue"),
str: "客官, 感觉如何",
success: successFn,
mouseover: function(){
$text4.val("滑入 : mouseover");
},
mouseout: function(){
$text4.val("滑出 : mouseout");
},
mousedown: function(){
$text4.val("按下 : mousedown");
},
mouseup: function(){
$text4.val("拿开 : mouseup");
}
});
//demo5
var $btn5 = $("#demo5").find("a.ui_btn_blue");
$btn5.eq(1).click(function(){
if(this.innerHTML === "把复制干掉"){
copy.remove($btn5.eq(0));
$btn5.eq(0).addClass("ui_btn_gray");
this.innerHTML = "再加上";
} else {
this.innerHTML = "把复制干掉";
$btn5.eq(0).removeClass("ui_btn_gray");
copy({
id: $btn5.eq(0),
str: "复制",
success: successFn
});
}
});
copy({
id: $btn5.eq(0),
str: "复制",
success: successFn
});
//demo6
var $btn6 = $("#demo6").find("a.ui_btn_blue");
$btn6.eq(1).click(function(){
var hit;
$(this).find("span").html(function(index, value){
return hit = (value|0)+1;
});
copy($btn6.eq(0), "谢亮+"+ hit);
});
copy({
id: $btn6.eq(0),
str: "谢亮+0",
success: successFn
});
</script>