zoukankan      html  css  js  c++  java
  • 移动端实现复制内容至剪贴板

    需求场景

    使用document.execCommand()方法,以下简称为“命令API”。

    示例一

    HTML部分

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

    JavaScript部分

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

    示例二

    实际开发中,需要复制的内容通常是文本元素中的文本。此时,可以使用一个不在可见区域内的表单元素来变向实现。

    HTML部分

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

    CSS部分

    #text_input {
      position: absolute;
      top: -100px;
    }
    

    JavaScript部分

    var inputElem = document.getElementById('text_input');
    var btnElem = document.getElementById('copy_text');
    var textElem = document.querySelector('p');
    btnElem.addEventListener('click', function() {
      if(!document.execCommand) {
        console.error('当前环境不支持复制功能');
        return;
      }
      inputElem.value = textElem.innerText;
      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; 来隐藏表单元素。所以,只能将此表单元素,定位至可以见区域之外。

    更多方案

    • clipboard.js:不依赖flash的一个插件。实现原理和上面的例子是类似的,使用插件可以简化很多开发工作。
  • 相关阅读:
    react-custom-scrollbars的使用
    【react】Mobx总结以及mobx和redux区别
    【React】Redux入门 & store体验
    chrome安装react-devtools开发工具
    【vue】vuex防止数据刷新数据刷掉
    搭建博客的两个工具区别
    JavaScript中的作用域
    通过JavaScript创建表格
    JavaScript中的普通for循环和 for in循环
    JavaScript中创建默认对象的方式
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/8044477.html
Copyright © 2011-2022 走看看