Merida Design Blog

Publicado el | Recursos /

Clipboard.js: Envía texto al portapapeles desde tu aplicación

Clipboard.js es una pequeña librería que te permite copiar el texto contenido en algún elemento del DOM y mandarlo al portapapeles, también te permite capturar el evento para mostrar retroalimentación visual al usuario (un tooltip por ejemplo).


Ejemplo de copiado

    <textarea id="myValue">lorem ipsum dolor sit amet... </textarea>
    
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#myValue">
        Copiar al portapapeles
    </button>

 

Capturar el evento

    var clipboard = new Clipboard('.btn');
    
    clipboard.on('success', function(e) {
        console.log('Acción: ' + e.action); // la acción realizada <code>cut</code> o <code>copy</code>
        console.log('Text: ' + e.text); // el texto copiado
        console.log('Disparador: ' + e.trigger); // el objeto que inció la acción
        
        e.clearSelection();
    });
    
    clipboard.on('error', function(e) {
        console.log('Acción: ' + e.action);
        console.log('Disparador: ' + e.trigger);
    });   
    

Página: http://zenorocha.github.io/clipboard.js/



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: