项目中使用了选中的复制功能，就是点击按钮将左边的内容复制到剪贴板。原来的方法是创建一个隐藏的textarea，然后填写内容，每次都会执行select方法，使用的是document.execCommand('copy')方法。这次尝试了clipboard.js这个库，感觉非常好用。我还是本着理解原理的方式看的。下面整理一下实现代码，先分析一下它引入的select。这个select是一系列的选择方法，主要针对表单元素和非表单元素的不同处理。下面一一分析其实现。在每种情况下，都会编写一个示例并将其放在文章的末尾。如果是select，这里的select就是form元素的下拉框，直接关注元素inputDom.focus()就可以设置为选中状态，如果是input或者textarea，只需要执行select或setSelectionRange直接调用select方法选中所有Text，如果想知道用户选中的文本内容，可以使用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);//AllSelected使得直接选中时文本不处于可编辑状态，可以添加保护使选中或执行setSelectionRange时文本处于只读状态varisReadOnly=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表示包含节点和部分文本节点的Document片段。这里常用的是为DOM文本设置一个Range片段。可以使用Range.selectNodeContents()方法，最后使用Selection提供的addRange方法添加创建的Range。为了保证选中区域的唯一性，可以使用selection。removeAllRanges()varselection=window.getSelection();varrange=document.createRange();范围.selectNodeContents（元素）；选择.removeAllRanges();选择.addRange(范围);selectedText=selection.toString();简单复制结束时，只需要执行document.execCommand('copy')复制内容即可。当然clipboard.js封装了很多有用的方法，后面会分析。所有演示案例都在这里
