CONTENT

在原生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,再将它复制到剪贴板中,从而实现我们需要的功能。

Comments | NOTHING

暂无评论...