JavaScript实现获取文本select的值、复制文本插件clipboard.js

JavaScript实现获取文本select的值

使用JS实现当我们选中页面中的部分文字时，能够返回我们选中的文字，这其实是复制的第一步

     window.onload = function(){
        document.onmouseup = function(){
            var text ="";
            if(document.selection){
            text = document.selection.createRange().text;//兼容IE 
        }else if(document.getSelection){
            text = document.getSelection();
            if(text.toString()==""){
                return false;
            }else{
                console.log(text.toString());
            }
            // console.log(text.anchorNode);
        }
        // IE11和FF中无法获取input中select的值     IE6-9 chrome中可以
        //text is object  
    }
}

mouseup的时候触发函数，document.selection表示支持IE的时候，如果我们没有选中文本的时候 通过判断text的内容是否为空来判断执行的动作。

实现复制文本的轻量级插件clipboard.js

上面我们能够获取选择的文本，但有由于浏览器的兼容问题，我们不方便实现复制的功能，这里我们可以使用这个开源的插件
clipboardjs官网
使用的方式也比较方便，适合平常对某个需要复制的文字域进行设置复制的快捷按钮
使用的方法
1. 在文档中引入clipboard.min.js文件
2.

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    Copy
</button>

在要触发复制的元素中添加data-clipboard-target="目标元素的class或者是ID",目标元素还可以使其他包含文本的元素
测试当使用class时只能找到第一个class的内容
3.创建js，在js中 添加new Clipboard('.btn');即可实现对应匹配文本的复制
当然也可以在触发元素中添加属性data-clipboard-action="cut"
表示剪切，不过要在input标签和textarea标签中才能完全实现剪切的功能

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

同时我们还可以在触发元素中添加data-clipboard-text="text what you want copy"
这样能够直接复制里面的内容

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

当我们复制成功后我们还可以定义回调函数，给出提示信息

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

我们也可以动态的设置要复制的文本和目标的对象

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling; //通过函数返回要复制的目标对象的文本
    }
});

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');//通过函数动态返回要复制的文本
    }
});