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

li21 发布于2019-08-21 17:46 / 823人阅读

摘要：下面对它的实现一一分析。可以使用获取选中的内容也可以使用获取一个用户选择的范围。在这里完成了对用户选中内容的一些操作，而且在不是表单无法触发事件的时候，也可以在指定区域监听事件来实时获取选中的内容完成复制等功能。

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

就是点击按钮，复制左侧的内容到剪切板，原来一直用的方法是创建一个隐藏的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封装了很多有用的方法，后续会接着分析。
所有的演示案例在这里
实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89976.html

clipboard.js代码分析(2)-emitter

摘要：用于在同一主模块下的不同子模块以及不同主模块之间的通信，支持动态绑定作用域。如果用过的父子组件事件通信以及，对事件管理器应该不会陌生的。而且支持指定作用域，可以远程调用任意模块的函数。上一篇文章介绍了clipboard.js这个工具库中的第一个依赖select这个工具库主要完成了对任意DOM元素的复制到粘贴板的功能。这次介绍一下clipboard.js源码中的第二个依赖的轻型工具库t...

MoAir 2019-08-22 15:04 评论0 收藏0
JavaScript复制内容到剪贴板

摘要：原文链接最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。完整代码如下复制成功总结以上就是关于如何实现复制内容到剪贴板，附上几个链接兼容性原文链接：https://github.com/axuebin/ar... 最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。常见方法查了一下...

ideaa 2019-08-22 14:54 评论0 收藏0
移动端复制文本到粘贴板，clipboard.js的使用，移动端与PC端复制粘贴兼容写法

摘要：首先引用文本文档要用复制按钮要用去掉文字检查，不可编辑，插件自带的属性样式代码至此，兼容移动端和端的复制粘贴功能完美实现，感谢作者作者来源原文版权声明本文为博主原创文章，转载请附上博文链接 1.首先引用clipboard.js 2.html 文本文档要用textarea,复制按钮要用button 9999999 spellcheck=false去掉文字检查，readonly不可编辑...

legendmohe 2019-08-23 16:28 评论0 收藏0
移动端复制文本到粘贴板，clipboard.js的使用，移动端与PC端复制粘贴兼容写法

摘要：首先引用文本文档要用复制按钮要用去掉文字检查，不可编辑，插件自带的属性样式代码至此，兼容移动端和端的复制粘贴功能完美实现，感谢作者作者来源原文版权声明本文为博主原创文章，转载请附上博文链接 1.首先引用clipboard.js 2.html 文本文档要用textarea,复制按钮要用button 9999999 spellcheck=false去掉文字检查，readonly不可编辑...

Caicloud 2019-08-02 16:09 评论0 收藏0