移动端实现复制内容至剪贴板小例子

示例一

HTML部分:

<input type="text" id="text_input" />
<button type="button" id="copy_text">copy</button>

js部分:

var inputElem = document.getElementById('text_input');
var btnElem = document.getElementById('copy_text');
btnElem.addEventListener('click', function() {
  if(!document.execCommand) {
    console.error('copy unsupport');
    return;
  }
  inputElem.select();
  var result = document.execCommand('copy');
  if(result) {
    console.log('copy success');
  } else {
    console.error('copy fail');
  }
});

 


注意事项

  • 检测当前环境是否支持命令API,这一步不可或缺。
  • 浏览器环境不支持命令API,须要合理地提示用户手动进行复制操做。因此,必定不能设置文本元素 user-select: none;,这样会使文本不能被选择。
  • 表单元素必须处于被选中状态,即调用 inputElement.select() 方法,文本元素没有 select() 方法。
  • 经测试,不能使用 display: none; 或 visibility: hidden; 来隐藏表单元素。因此,只能将此表单元素,定位至能够见区域以外。
  • 必须表单元素有用,若是不是表单元素,建议新建input标签,而后把val赋给input,在进行操做。须要灵活实现

更多方案

  • clipboard.js:不依赖flash的一个插件。实现原理和上面的例子是相似的,使用插件能够简化不少开发工做。

 


 

原文见:https://github.com/xiaoyucoding/ask/issues/3