之前复制淘口令到剪切版一直没有好好解决,这里做一个笔记。
1.引入js文件
2.在html里面style里面创建一个样式:
.btn{
display: none;
}
然后在body里面创建一个对象
<button id="para" class="btn" style="display: none;" data-clipboard-text="€zLaT0BWxX7J€">€zLaT0BWxX7J€</button>
.btn样式里面设置display:none没有用,在h5打开的时候,button还是会出现,闪一下就消失了。
但是在标签里面设置style="display: none;" 就好了。
3.初始化ClipbordJS对象
这里有个问题,本地测试没事,但是上传到服务器,会报错
clipboard : Cannot read property 'addEventListener' of null
我这里是因为初始化
var clipboard = new ClipboardJS('.btn');
的时候,clipboard.min.js文件还没有加载完成,所以我这里设置了一个延时。
var clipboard;
//复制淘口令到剪切版
setTimeout(addClipboard,5000);
function addClipboard(){
clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
window.alert("淘口令复制成功");
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}
4.将button放到flash2x的显示列表里面
var para = document.getElementById("para");
para.style.color = "#246612";
para.style.font="italic bold 28px arial,sans-serif";
para.style.background = "transparent";
para.style.border = "none";
para.style.display = "none";
//floatDisplay
var floatDisplay = new annie.FloatDisplay();
floatDisplay.init(para);
floatDisplay.x = 200;
floatDisplay.y = 718;
yourDadMc.addChild(floatDisplay);
我是在这里设置样式的,主要是不懂css和jquery。
这样就可以在微信里面把需要复制的文本复制到剪切板了。
5.还有一个是点击button上传照片遇到的问题。
我使用的是点击flash2x里面的按钮,让隐藏的模拟被点击,来达到调取手机相册的目的。
按钮点击事件是这样的:
function selectImage() {
setTimeout(function(){
fileInput.click();
},200);
}
为什么加200延迟,我也不清楚原因,不加setTimeout有时候就是不能打开手机相册,
然后发现input监听"change"事件会不起作用 (怠工)
fileInput.addEventListener('change', tmpSelectFile, false);
需要监听click事件(正确)
fileInput.addEventListener('click', tmpSelectFile, false);
....
好像是这样,如果有什么错误,请大佬们指正,谢谢。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!