HTML5 一键拷贝 - 鼠标悬停在内容上出现点击拷贝区块

Click to Copy 使用了document的copy命令。注意该指令不兼容Firefox。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3026
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function copyFull() {
    //copys inner html of target div.

//event button
    var copyBtn = $('.copy-btn');
    copyBtn.on('click', function(event) {

var $this = $(this);

//find the element that has the text you want.
        var content = $this.prev('.copy-content');
        //creates new range object and sets text as boundaries.
        var range = document.createRange();
        range.selectNode(content[0]);
        window.getSelection().addRange(range);

try {
            // Now that we've selected the text, execute the copy command  
            var successful = document.execCommand('copy');
            /*var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy email command was ' + msg);*/

//handle success
            $(this).after('<span class="success"></span>');
            setTimeout(function() {
                $('.success').addClass('show');
                setTimeout(function() {
                    $('.success').fadeOut(function() {
                        $('.success').remove();
                    });
                }, 1000);
            }, 0);
        } catch (err) {
            //console.log('Oops, unable to copy');
        }
        //clear out range for next event.
        window.getSelection().removeAllRanges();

});
}

function copyPhone() {
    // same principle. Set a copyBtn, and a target element. In this case they are the same.
    var copyBtn = $('.phone');
    copyBtn.on('click', function(event) {
        var content = $(this);
        var range = document.createRange();
        range.selectNode(content[0]);
        window.getSelection().addRange(range);

try {
            var successful = document.execCommand('copy');
            $(this).addClass('p-success');
            setTimeout(function() {
                $('.phone').removeClass('p-success');
            }, 1000);
        } catch (err) {
            // console.log('Oops, unable to copy');  
        }

window.getSelection().removeAllRanges();

});
}

$(function() {
    copyFull();
    copyPhone();

});

编译

CSS

body {
    margin-top: 45px;
    font-family: 'Source Sans Pro', sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1 {
    font-size: 1.5em;
    margin-bottom: 5px;
    padding-left: 20px;
    color: #797979;
    text-transform: uppercase;
    font-weight: 600;
}
.main {
    background: #f9f9f9;
    padding: 30px 0;
    width: 400px;
    margin: 0 auto;
    border: 1px solid #eaeaea;
}
.main .list-heading {
    color: #e93937;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 600;
    padding-left: 20px;
}
.main li {
    color: #636363;
    line-height: 1.2em;
    padding-top: 10px;
    font-weight: 500;
    padding: 5px 20px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
}
.main li:first-child {
    border-top: 1px solid #efefef;
}
.main li:hover {
    background-color: #efefef;
}
.main li:hover:after {
    bottom: 0;
}
.main li:hover .copy-btn {
    opacity: 1;
    right: 0;
}
.main li .copy-btn {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    top: 0;
    text-align: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    right: -100%;
    bottom: 0;
    padding: 15px;
    background-color: #636363;
    color: #fff;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    border: none;
    outline: none;
    width: 131px;
}
.main li .copy-btn:before {
    content: "";
    width: 20px;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: center;
}
.main li .copy-btn:after {
    content: "click to copy";
    display: inline-block;
    vertical-align: middle;
}
.phone {
    color: #636363;
    position: relative;
    display: inline-block;
    margin-top: 10px;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    border: 2px solid transparent;
}
.phone:hover {
    cursor: pointer;
    border: 2px solid #636363;
}
.phone:hover:before {
    opacity: 1;
}
.phone:before {
    content: "Just the number";
    display: inline-block;
    position: absolute;
    opacity: 0;
    text-transform: uppercase;
    right: -92%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    top: -2px;
    background-color: #636363;
    padding: 2px 4px;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
}
.phone:after {
    content: "";
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: inline-block;
    vertical-align: bottom;
    margin-left: 5px;
}
.success {
    position: absolute;
    right: 0;
    cursor: pointer;
    width: 101px;
    top: 0;
    font-size: 12px;
    text-align: center;
    font-style: normal;
    bottom: 0;
    padding: 15px;
    background-color: #e93937;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    font-weight: 600;
    -webkit-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    border-radius: 100%;
}
.success:before {
    content: "";
    width: 20px;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: center;
}
.success:after {
    content: "Copied!";
    display: inline-block;
    vertical-align: middle;
}
.success.show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    border-radius: 0;
}
.p-success:hover {
    border: 2px solid #e93937;
}
.p-success:before {
    content: "Copied";
    background: #e93937;
    width: 92px;
    text-align: center;
}
p {
    margin-bottom: 30px;
    color: #989898;
    padding-left: 20px;
}

HTML

<div class="main">
    <h1>Click to Copy</h1>
    <p> Hover an item and click the button to copy its contents.
        <br>Tested in chrome.</p>
    <ul>
        <h2 class="list-heading">Conference Lines</h2>

<li>
            <div class="copy-content">Moscow Conference Line
                <br> <span class="phone">5.654.7888</span>
                <br> 7-digit access code 7896154
                <br> Admin: 8888
            </div>
            <button class="copy-btn"></button>

</li>
        <li>
            <div class="copy-content">Primary Conference Line
                <br> 1.334.4536
                <br> 7-digit access code 7654321
                <br> Admin: 9898
            </div>
            <button class="copy-btn"></button>

</li>

<h2 class="list-heading"> Offices</h2>
        <li>
            <div class="copy-content">
                Dallas
                <br> 1992 Watsip St
                <br> Dallas TX 65473
                <br>

</li>
    </ul>
</div>

Click to Copy 使用了document的copy命令。注意该指令不兼容Firefox。

编辑器支持Emmet

快捷键

Click to Copy 使用了document的copy命令。注意该指令不兼容Firefox。

HTML5 Canvas可用鼠标拖拉的火把和烟雾动画

HTML5 GSAP在图片上生成涟漪波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：