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的一个插件。实现原理和上面的例子是类似的,使用插件可以简化很多开发工作。
  • 相关阅读:
    phpstorm实现分屏展示代码
    Yii2 JWT
    JSON Web Token 入门教程
    Linux常用命令: zip、unzip 压缩和解压缩命令
    yii2表单提交CSRF验证
    解决jquery click事件执行两次
    《Inside C#》笔记(十二) 委托与事件
    MVC与单元测试实践之健身网站(七)-日程与打卡
    《Inside C#》笔记(十一) 运算符重载
    MVC与单元测试实践之健身网站(七)-添加计划
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/8044477.html
Copyright © 2011-2022 走看看