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封装了不少有用的方法，后续会接着分析。
全部的演示案例在这里
实例