clipboard.js代码分析(1)-select

项目中用到了选中复制功能

就是点击按钮，复制左侧的内容到剪切板，原来一直用的方法是创建一个隐藏的textarea，把内容填进去，每次都执行select方法，在使用document.execCommand('copy')方法，这次尝试了一下clipboard.js这个库感觉还是非常的好用，
还是本着弄懂原理的原则，就读了一下它的实现代码，做一下梳理，首先对它引入的select进行了一番分析，这个select是一系列的选中方法，主要针对表单元素和非表单元素进行了不同的处理。下面对它的实现一一分析。
每一种情况都写了一个实例，放到了文章最后。

如果是 select

这里的select是表单元素下拉框
直接对元素进行focus就可以将其设置为选中状态

inputDom.focus()

如果是 input 或者 textarea

那么只需要执行select 或者 setSelectionRange即可
直接调用select方法是选中所有文本，如果想要知道用户选中的文本的内容可以使用dom对象的select事件且配合selectionStart， selectionEnd获取用户选择的部分内容

inputDom.value.substring(inputDom.selectionStart,inputDom.selectionEnd);

inputDom.addEventListener('select', function() {
    inputDom.value.substring(inputDom.selectionStart,inputDom.selectionEnd);
})

配合复制的功能，就可以实现选中即复制的效果了，复制的功能后面文章会说。
也可以直接选择部分文本，这就要使用setSelectionRange方法，这个方法可以接收起始位置，终止位置，和方向
要看到选择的文本， 必须在调用 setSelectionRange()之前或之后立即将焦点设置到文本框

inputDom.focus();
inputDom.setSelectionRange(2,5); // 选择特定部分
inputDom.setSelectionRange(0, -1); // 全选 
inputDom.setSelectionRange(0, input.value.length); // 全选

为了在直接选中的时候文本不是在可编辑状态，可以增加保护，在执行select或者setSelectionRange的时候，使得文本处于只读状态

var isReadOnly = element.hasAttribute('readonly');
if (!isReadOnly) {
  element.setAttribute('readonly', '');
}
element.select();
element.setSelectionRange(0, element.value.length);
element.removeAttribute('readonly');

其他DOM元素

如果不是表单元素，就需要使用getSelection 和 createRange方法了
getSelection 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
可以使用document.getSelection().toString()获取选中的内容,也可以使用document.getSelection().getRangeAt()获取一个用户选择的范围。当然还有很多API，可以参考MDN链接。在这里完成了对用户选中内容的一些操作，而且在不是表单无法触发select事件的时候，也可以在指定区域监听keyup事件来实时获取选中的内容完成复制等功能。
但是还不能处理浏览器主动选中，有的时候，我们需要点击按钮去复制指定区域或者元素的内容，就是本文刚开始说的情况，这就需要createRange方法了，createRange返回一个Range对象，Range表示包含节点和部分文本节点的文档片段。在这里常用的是对DOM的文本进行一个Range片段的设置，可以使用Range.selectNodeContents()方法，最后使用Selection提供的addRange方法将创建的Range添加进去，为了保证选择的区域唯一，可以使用selection.removeAllRanges()

 var selection = window.getSelection();
 var range = document.createRange();
 range.selectNodeContents(element);
 selection.removeAllRanges();
 selection.addRange(range);
 selectedText = selection.toString();

简单复制

最后只需要执行document.execCommand('copy')就可以复制内容了，当然clipboard.js封装了很多有用的方法，后续会接着分析。
所有的演示案例在这里
实例