Laya 一键复制文本功能

刚开始接触laya,刚好项目中要实现一个一键复制玩家地址的功能,在网上查了一些资料,现在H5和小游戏上面普遍使用的方法有两种,1.clipboard  2.使用document.execCommand。归根结底clipboard也是使用了第二种方法,只是做了一层包装。我之前曾经尝试第二种方法,document.execCommand这个执行的返回值只是表示当前运行环境(网页,手机)是否支持这个命令,我调用之后,并没有把我想要复制的文本复制到剪切板。查了很久都不懂是为啥,最后还是选用了第一种方法(如有大神用第二种方法实现了的话,望留言赐教一把)。

  • 先去git上将工程下载下来。Laya 一键复制文本功能_第1张图片
  • 将dist文件夹中的clipboard.js文件移植到Laya工程的 bin下的libs目录中并在index.js中加入以下代码
loadLib("libs/clipboard.js")
  • 注意要放在loadLib("js/bundle.js")之前
  • 在需要用到该功能的laya界面代码中加入以下代码。项目是用AS3编写,用其他语言的转换以下就可以了
public function InitCopy():void
{
	var layaContainer = Laya.Browser.getElementById("layaContainer");
	this.btnCopy = Browser.createElement("button");//生成一个按钮
	this.btnCopy.id = "btnCopy";
	this.btnCopy.className = "btnCopy";//指定class属性
	this.btnCopy.style.position = "absolute";
	this.btnCopy.style["font-size"] = '28px';
	this.btnCopy.style.color = '#ffffff';
	this.btnCopy.style["opacity"] = '0';
	var that = this;
	layaContainer.appendChild(this.btnCopy);//把按钮添加到layacontainer中
	fitDOM();//初始化的时候先将按钮和laya的按钮映射一把。
	var _btnCopy = new window.ClipboardJS('.btnCopy',{
		text:function(){
		return "想要复制的文本信息";
		}
	});
	// 每次舞台尺寸变更时,都会调用Utils.fitDOMElementInArea设置copy按钮位置
	Laya.stage.on(Laya.Event.RESIZE, this, this.fitDOM);
}
  • 在这里要注意下就是 new window.ClipboardJS 中的代码块必须用js来编写。之前试过用as3来,结果不识别。
  • fitDOM()主要是把创建的复制按钮和laya的按钮做1个映射
//适配copy按钮
public function fitDOM():void
{
	Utils.fitDOMElementInArea(this.btnCopy, xxxxxBtnObj, 0, 0, xxxxxBtnObj.width, xxxxxBtnObj.height);
}

这样,打开这个界面的时候调用一把InitCopy就会生成1个按钮和对应的按钮映射在一起,点击就可以将想要复制的文本信息复制到剪切板了,亲测可用。

你可能感兴趣的:(laya)