• 浏览器中实现剪切板操作


    浏览器对剪切板的访问

    Clipboard API

    剪贴板 Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取或更改剪贴板内容。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式

    方法

    Clipboard api 有四个方法,都是返回promise。执行方法时,需要网页本身处于焦点,可以先触发一个click或其他事件

    read()
    从剪贴板读取数据(比如图片),返回一个 Promise 对象
    
    readText()
    从剪贴板读取文本,返回一个 Promise 对象
    
    write()
    写入任意数据至操作系统剪贴板
    
    writeText()
    写入文本至操作系统剪贴板
    
    例子:
    // 如后台自动运行,则需触发一个聚焦,或点击等其他事件,让页面处于焦点。
    // 一般情况下页面都是处于焦点中的,所以不是很需要执行下述方法
     document.dispatchEvent(new Event('focus'));
     
     navigator.clipboard.readText().then((data) => console.log(data));
    

    事件

    有关剪切板的事件包含三种
    copy
    cut
    parse
    

    document.execCommand [已废弃的方法]

    当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。

    使用该方法进行复制内容时,一般是先设置一个输入框,然后选中后执行
    document.execCommand('copy')
    
    具体使用方式如下例:
    
    input.focus();
    input.setSelectionRange(0, -1);
    document.execCommand('copy');
    
  • 相关阅读:
    基础网络技术--学习网络的的道路漫长啊
    华为nova8se和vivoS7e的区别哪个好
    Java.awt实现一个简单的围棋
    HashMap put原理详解(基于jdk1.8)
    Paper Pal:一个中英文论文及其代码大数据搜索平台
    【u116】最短路计数
    【u108】取数游戏
    【u106】3D模型
    【topcoder SRM 652 DIV2 250】ValueOfString
    【u103】绘制二叉树
  • 原文地址:https://www.cnblogs.com/feiyu127/p/13554598.html
Copyright © 2020-2023  润新知