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的一个插件。实现原理和上面的例子是类似的,使用插件可以简化很多开发工作。
  • 相关阅读:
    Vue之axios基础使用
    Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目
    解决:'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    CentOS root用户修改只读文件时提示加! 解决办法
    CentOS 7 源码编译安装 Redis
    CentOS安装Jdk并配置环境变量
    Vue + Spring Boot 项目实战(一):项目简介
    druid 数据源 使用属性文件的一个坑
    scala 学习笔记(07) 一等公民的函数
    linux:手动校准系统时间和硬件CMOS时间
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/8044477.html
Copyright © 2011-2022 走看看