Layabox填坑记-通过事件触发来复制文本内容到剪贴板

在原生html中可以直接将文本复制到剪贴板中，然后用户可以通过Ctrl+v的方式将该内容复制到文本域，但是使用LayaAir却不行，因此想要实现这种效果必须使用原生代码来达到我们的目的。

初始化定义一个变量fn，然后赋值：

 private fn ;//
this.fn = this.copyToClipboard.bind(this);

复制到剪贴板的具体方法，需要创建dom，然后操作dom进行触发事件，从而保存文本到剪贴板，具体代码：

 private copyToClipboard() {
    let mouseX = Laya.stage.mouseX;
    let mouseY = Laya.stage.mouseY;
    if (!this.copyBtn.hitTestPoint(mouseX, mouseY)) //此处注意使用此方法判断点击在canvas的位置是否在按钮位置时，该按钮需要设置长宽为固定值，同时按钮不能缩放
    {
    	return;
    }
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.display = 'opacity';
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = '0';
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    textArea.value = this.officalLink.text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
    	var successful = document.execCommand('copy');
    	var msg = successful ? '成功复制到剪贴板' : '复制到剪贴板失败';
    	myPublic.Util.log(msg);
    } catch (err) {
    	myPublic.Util.log('该浏览器不支持点击复制到剪贴板');
    }
    document.body.removeChild(textArea);
}

在点击LayaBox按钮事件时，发射保存文本的消息：

 /**
* 复制按钮事件
*/
private copyBtnCallback() : void {
	var MouseEvent: any = document.createEvent("MouseEvents");
	var eventStr: string = Laya.Browser.onMobile ? "touchend" : "click";
	MouseEvent.initMouseEvent(eventStr, false, true);
	Laya.Render.canvas.dispatchEvent(MouseEvent);
}

public onRegister() : void {
	this.addLayaCanvasClick(this.fn);
}
public onRemove() : void {
	this.removeLayaCanvasClick(this.fn);
}
public addLayaCanvasClick(handler: any) : void {
	if(Laya.Browser.onMobile) {
		Laya.Render.canvas.addEventListener("touchend", handler);
	} else {
		Laya.Render.canvas.addEventListener("click", handler);
	}
}
public removeLayaCanvasClick(handler: any) : void {
	if(Laya.Browser.onMobile) {
		Laya.Render.canvas.removeEventListener("touchend", handler);
	} else {
		Laya.Render.canvas.removeEventListener("click", handler);
	}
}

不要忘记在初始化函数中注册事件：

 this.onRegister();

在界面销毁时移除事件：

 this.onRemove();

最后总结一下实现流程：

首先，给复制文本的按钮添加一个点击事件，当玩家点击复制时，会调用copyBtnCallback 这个方法，该方法中会创建一个原生的点击事件，并且发射该事件。

在创建这个复制按钮所在的UI的时候，需要添加一个接收上述事件的监听，该步骤会在onRegister方法中完成，当页面监听到点击事件时，便会触发copyToClipboard方法，判断鼠标位置是否在复制按钮范围内，如果在，就创建一个原生的文本域，并将我们需要复制的文本赋值给该文本域的text，再将它复制到剪贴板中，从而实现我们需要的功能。