[jQuery] Copy-Paste Permalink

Placer le focus dans un permalien pour pouvoir copier-coller et partager ensuite.

by Jean-Baptiste Audras

HTML

<div>
    <h1>Voici mon super article !</h1>
    <p>Un peu de texte</p>
    <a href="#" class="getlink" data-link="http://decisions.111media.fr" title="Obtenir le lien permanent vers cet article">#</a>
    <p class="hreflink js-hidden"></p>
</div>

CSS

body {
    background: #3a3;
}
div {
    margin: 20px auto;
    padding: 10px;
    width: 400px;
    background:  #fff;
    font-family: 'Helvetica Neue', arial, sans-serif;
}
.getlink {
    display: inline-block;
    padding: 2px 5px;
    background: #5c5;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
input {
    background: #fff;
    border: 0 none;
    outline: none;
    padding: 5px 0px;
    width: 390px;
    font-size: 14px;
}
span {
    font-size: 12px;
    display: block;
}

JavaScript

$('.js-hidden').hide();
$('.getlink').click(function(event){
    event.preventDefault();
    $(this).siblings('.hreflink').children().remove();
    $(this).siblings('.hreflink').slideToggle('fast');
    $(this).siblings('.hreflink').append('<input type="text" value="'+$(this).attr('data-link')+'" /> <span>ctrl+c ou cmd+c pour copier ce lien permanent</span>');
    $(this).siblings('.hreflink').children('input').focus();
});