实现点击元素自动复制内容的功能

2017-10-13

前言

之前也做过点击文本框内容自动复制的功能，但从来没遇到过点击非文本框自动复制的需求。在这里也一起记录下，如何实现这两种情况。

1.点击文本框，自动全选（移动端比较直观）

ps: 这种情况也可以使用Clipboard.js实现

<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
    function oCopy(obj){
        obj.select();
        js=obj.createTextRange();
        js.execCommand("Copy")
        alert("复制成功!");
    }
</script>

createTextRange()

主要是用来对一些文本对象进行操作.比如你有一大段文字,都在同一个P标签内,但是你只希望通过JS改变其中的一小部分,这时就可以用createTextRange来创建Range对象操作文本.因为默认情况下文本只是文本,并不是对象,要想像操作对象那样操作文本,只能是创建为Range对象.这是要操作的文本就具有了对象的功能和特性了。

2.点击非文本框，自动复制（以span标签为例）

方法：使用Clipboard.js实现。

兼容性如图所示：

那么如何解决低版本不兼容的问题呢?

官网指出：The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

解决方案：

1
2
3

clipboard.on('error', function(e) {
    alert('请选择“拷贝”进行复制!')
});

完整代码如下：

微信号<span id="bar" class="btn" data-clipboard-target="#bar">46333313</span>
<script src="clipboard.min.js"></script>
<script>
    //init
    var clipboard = new Clipboard('.btn');
    //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
    clipboard.on('success', function(e) {
        alert('复制成功!');
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert('请选择“拷贝”进行复制!')
    });
</script>

3.点击按钮，自动复制文本框内容

方法：使用Clipboard.js实现。

完整代码如下：

<!-- Target -->
<input id="bar" value="Mussum ipsum cacilds...">
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>
<script src="clipboard.min.js"></script>
<script>
    //init
    var clipboard = new Clipboard('.btn');
    //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
    clipboard.on('success', function(e) {
        alert('复制成功!');
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert('请选择“拷贝”进行复制!')
    });
</script>

data-clipboard-action=”cut” 可以实现剪切功能。

追加：之后发现动态添加到页面的内容，点击后复制，需要点击两次才生效。

解决方法：http://blog.csdn.net/qq_38594215/article/details/78800749