剪贴板 api html,Laya 复制 剪切板 (模拟html事件)

一、主流方式概括：

1.ZeroClipboard 就是常说的Flash法，通过加载一个Flash，让其访问系统剪贴板来绕过绝大多数系统的权限限制，然而现代浏览器中，flash逐渐没落.

2.setData 太老。。一般不太用，基本只适合IE.

3.document.execCommand

image.png

目前UC Browser for android不支持，奇怪的是默认的Android browser之前支持，后面又不支持了……

4.clipboard.js 和execCommand兼容性一样的，只是对其做了封装，参考其源码：

key: 'copyText',

value: function copyText() {

var succeeded = void 0;

try {

succeeded = document.execCommand(this.action);

} catch (err) {

succeeded = false;

}

this.handleResult(succeeded);

}

二、clipboard.js

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {

console.info('Action:', e.action);

console.info('Text:', e.text);

console.info('Trigger:', e.trigger);

e.clearSelection();

});

clipboard.on('error', function(e) {

console.error('Action:', e.action);

console.error('Trigger:', e.trigger);

});

注意，'.btn'给所有class="btn"的元素都加了监听

使用清爽，测试通过，然而项目只有一个地方用到copy，为了他加个插件真是不优美。。

1.API简介

参考# JS 的execCommand 方法 做的一个简单富文本

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

aCommandName

一个 DOMString ，命令的名称。有很多，随便举几个例子：

editor.document.execCommand("copy", true, null);//复制方法

editor.document.execCommand("Bold", true, null);//加粗方法

editor.document.execCommand('italic',true,null);//斜体方法

aShowDefaultUI

一个 Boolean， 是否展示用户界面，一般为 false。Mozilla 没有实现。

aValueArgument

一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url)，默认为null。

2.重点介绍copy命令

根据兼容不同，执行后可能的情况(涉及返回值)：

不支持execCommand：抛出异常

不支持copy方法：返回false

成功：true

copy

function copy(copytargetid,copybtnid){

var cpt = document.getElementById(copytargetid);

var cpb = document.getElementById(copybtnid);

$(cpt).focus();

$(cpt).select();

try{

if(document.execCommand('copy', false, null)){

$(cpb).tooltip({title:"copied!", placement: "bottom", trigger: "manual"});

$(cpb).tooltip('show');

cpb.οnmοuseοut=function(){$(cpb).tooltip('destroy')};

} else{

$(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});

$(cpb).tooltip('show');

cpb.οnmοuseοut=function(){$(cpb).tooltip('destroy')};

}

} catch(err){

$(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});

$(cpb).tooltip('show');

cpb.οnmοuseοut=function(){$(cpb).tooltip('destroy')};

}

}

1.create a dom (''),domNode.value='copyContent' //创造一个domNode,并且将text内容放到节点上.

2.domNode 放到body里面,class{ display:absolute;left:-200px;bottom:-100px},让该节点不在可视区域内.为什么不用display:none?因为display none 会让这个节点不出现在body中.后面也没办法被选择....所以用定位的方式,让这个节点看不到,但是还在body里.

3.domNode.select();//让node被选中

4

try{

document.execCommand('copy')

destroy(domNode);//销毁节点document.body.removeChild(aux);

}catch(exception e){

//当这个excCommand方法不被兼容时,会被捕捉到异常.

}

5. 可以黏贴了.(__) 嘻嘻……

想使用document.execCommand("Copy");的方法，但是这个方法貌似需要一个text或textarea.然后把复制内容放入到text或textarea中选中后才可以复制，但是我不想让用户看到text或者textarea.所以我将text隐藏掉了，发现复制失败，然后我又试了用hidden，也没有成功，

现在我用这个方法成功，但是总感觉不是一个解决的办法，求有用过document.execCommand("Copy");的人指点一下，谢谢

建议：隐藏不行，要可见或者absolute定位到可见区域外

注意: 只有 input 和 textarea 可以执行 select() 方法.

四、Laya中使用

出现一个奇怪的问题就是，必须是HTML元素触发才可以复制。

this.btn_copy.on(Laya.Event.CLICK, this, this.mockClick);

if (Laya.Browser.onMobile) {

Laya.Render.canvas.addEventListener("touchend", this.onClick);

} else {

Laya.Render.canvas.addEventListener("click", this.onClick);

}

}

private mockClick(): void {

var MouseEvent: any = document.createEvent("MouseEvents");

var n:string = Laya.Browser.onMobile ? "touchend" : "click";

MouseEvent.initMouseEvent(n, false, true);

Laya.Render.canvas.dispatchEvent(MouseEvent);

}

document.addEventListener("custom", function() {

console.log("弹弹弹，弹走鱼尾纹~~");

});

function test() {

var evt = document.createEvent("HTMLEvents");

// 初始化

evt.initEvent("custom", false, false);

// 触发, 即弹出文字

document.dispatchEvent(evt);

}

模拟事件不行，那只能通过对Laya.Render.canvas添加事件侦听，然后判断点击位置是不是我们UI上显示的触发按钮，然后再调用execCommand。这里又有蛋疼的问题，添加的事件侦听，因为有判断逻辑，所以使用了bind函数，然后发现移除不掉侦听了，又找了个临时变量来存储这个bind(注意，匿名函数也是移除不掉的)

private fn: any = this.ruleBtnHandler.bind(this);

private ruleBtnHandler(): void {

//ruleBtn需要指定宽高，否则hitTestPoint无效

if (this.ruleBtn.hitTestPoint(Laya.stage.mouseX,Laya.stage.mouseY)) {

window.open("www.baidu.com", '_new');

}

}

public onRegister(): void {

UIHelper.addLayaCanvasClick(this.fn);

}

public onRemove(): void {

UIHelper.removeLayaCanvasClick(this.fn);

}

public static addLayaCanvasClick(handler: any): void {

if (Laya.Browser.onMobile) {

Laya.Render.canvas.addEventListener("touchend", handler);

} else {

Laya.Render.canvas.addEventListener("click", handler);

}

}

public static removeLayaCanvasClick(handler: any): void {

if (Laya.Browser.onMobile) {

Laya.Render.canvas.removeEventListener("touchend", handler);

} else {

Laya.Render.canvas.removeEventListener("click", handler);

}

}

也可以用这种思路，去实现tabIndex

private keyHand:any = this.keyEvent.bind(this);

private keyEvent(e:KeyboardEvent):void{

if(e.keyCode == Laya.Keyboard.TAB){

e.preventDefault();

this.changeFocus();

}

}

onShow():void{

document.addEventListener("keydown",this.keyHand);

}

onHide(parmas?: any): void {

document.removeEventListener("keydown",this.keyHand);

}