微信使用flash2x与clipboard.js实现点击按钮复制文本

之前复制淘口令到剪切版一直没有好好解决,这里做一个笔记。 1.引入js文件 2.在html里面style里面创建一个样式: .btn{ display: none;}  然后在body里面创建一个对象 €zLaT0BWxX7J€...

之前复制淘口令到剪切版一直没有好好解决,这里做一个笔记。

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);

....
好像是这样,如果有什么错误,请大佬们指正,谢谢。

你可能感兴趣的文章

相关问题

1 条评论

请先 登录 后评论
不写代码的码农
大北兔

15 篇文章

作家榜 »

  1. 王倩 20 文章
  2. 苍老师 16 文章
  3. 大北兔 15 文章
  4. facaimao 14 文章
  5. 皮卡丘先生 13 文章
  6. 季梦导师 10 文章
  7. 许导解忧 10 文章
  8. 王迎保 10 文章