从剪切板到execCommand

前言

由于明天要早起，今天就不继续设计模式的学习，总结一些今天工作时候学到的东西。

从剪切板开始

由于需要做一个API管理系统，因此需要能够双击自动复制到剪切板的交互功能。

因为之前在博客园看到了类似效果，觉得应该是api直接能用，于是我直接找到了html5 clipboardData.

但是在chrome下无法使用，但是用了网上直接window.clipboardData.setData或者getData的用法发现是无法正常运行，后来看到只在IE下支持，chrome因为安全原因不允许。（后面会具体提到） 然后我就想应该有脱离api的方法，因此我就重新翻了博客园的内容，但是我发现它是一种另类的做法，它是打开一个窗口，然后自己全选文本，然后提示你ctrl+c。这不是我想要的效果。因此直接去stackoverflow上学习新姿势。

后来发现已经有人用原生的来实现了。我们来看下他怎么写的:

    function copyTextToClipboard(text) {
      var textArea = document.createElement("textarea");
      //首先创建一个textarea

      textArea.style.position = 'fixed'; 
      textArea.style.top = 0;
      textArea.style.left = 0;
    
     //把它隐藏起来
      textArea.style.width = '2em';
      textArea.style.height = '2em';

      //同时需要把padding给去掉
      textArea.style.padding = 0;

      // 去除Border
      textArea.style.border = 'none';
      textArea.style.outline = 'none';
      textArea.style.boxShadow = 'none';

      // 防止闪现白色盒子
      textArea.style.background = 'transparent';

		//把传过来的内容赋值给textarea
      textArea.value = text;
		//将其添加到页面
      document.body.appendChild(textArea);
		//选中所有文本
      textArea.select();

      try {
        //这句最关键，将内容赋值给copy操作
        var successful = document.execCommand('copy');
        
        var msg = successful ? 'successful' : 'unsuccessful';
       // console.log('Copying text command was ' + msg);
      } catch (err) {
      //  console.log('Oops, unable to copy');
      }
		//用完就删
      document.body.removeChild(textArea);
    }

然后我们直接在所需双击事件中把内容传过来

 copyTextToClipboard(event.target.attributes.url.value);

这样就成了。

但是，如果只追求需求实现那无法加深学习，因此我们需要进行原理探究。

从上面看到 document.execCommand 主要是这句达到了复制到系统剪切板的功能。我们去mdn看看。

document.execCommand

当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法，通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作 (如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable，通过执行execCommand 方法可以对当前活动元素进行很多操作。

使用语法如下:

execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)

我们可以看到关键参数

   copy
	把当前选中区域复制到系统剪贴板。使用这个命令需要首先在 user.js 接口中进行激活。
	
	createLink
	当有选中区域的时候，使用这个命令转化选中区域为一个锚点，需要提供一个URI给第3个参数. 这个URI必须至少包含一个字符，空白字符也可。(Internet Explorer 会创建一个URI为空的a标签)
	
	cut
	剪切选中文本到剪切板. 同copy一样需要开启剪切板功能。
	
	delete
	删除当前选中区域
	
	enableInlineTableEditing
	开启或禁用表的行和列的插入删除功能 ( Internet Explorer不支持)
	
	enableObjectResizing
	开启或禁用图片或者其他可resize元素的resize功能 ( Internet Explorer不支持)

	paste
	在选区或者插入点粘贴剪切板中的文字。（会替换当前选区的文本）。需要在user.js中打开剪切板功能。

这时候我才惊觉这是当初写富文本编辑器那玩意儿啊-0-

而且mdn给出了codepen上的使用例子. 点这里

关于chrome对clipboardData的支持情况，我们可以去 CanIUse 里看到详细信息

Does not support the ClipboardEvent constructor

Supports cut & copy events without a focused editable field, but does not fire paste with document.execCommand('paste')

看来果然如此，只能通过execCommand来委婉达到复制粘贴动作。

今天就到这里。

Table of Contents