Question

Hola amigos,

Quisiera saber como hago para que al momento de dar click en un input que es de solo lectura se me seleccione automaticamente todo su contenido y quede copiado al portapapeles para que luego el usuario pueda dar ctrl + v (command + v) y pegar el contenido en otra parte.

Esto es posible con JQuery?

Gracias a todos!

Answer 1

Por seguridad todo navegador moderno no permite copiar directamente al clipboard, tienes opciones con flash player. por ejemplo con este proyecto:

https://github.com/mojombo/clippy

lo que podrías hacer es seleccionar el campo y avisar al usuario que teclee ctrl + c en un prompt o un tooltip.

hace un tiempo hize un código simple:

(function ($) {
    'use strict';

    var defaults = {
        message : 'presiona ctrl-c + ctrl-v'
    };

    function copyPaste(element, options)
    {
        // set element
        this.element = element;

        // set settings
        this.settings = $.extend({}, defaults, options);

        // intialize
        this.constructor();
    }

    copyPaste.prototype = $.extend({

        tooltip : null,

        constructor : function()
        {
            this.set_tooltip();

            $(this.element)
            .on('focus click', null, {tooltip : this.tooltip}, function(event){
                $(this).select();
                event.data.tooltip.show();
            })
            .on('blur', null, {tooltip : this.tooltip}, function(event){
                event.data.tooltip.hide();
            });
        },

        set_tooltip : function()
        {
            this.tooltip = $('<div>').css({
                'background' : '#000000',
                'padding' : '6px 12px',
                'font-size' : '11px',
                'border-radius' : 4,
                'color' : 'white',
                'position' : 'absolute',
                'text-align' : 'center'
            })
            .html($('<span>').html(this.settings.message))
            .append(
                $('<div>').css({
                    'border' : '8px solid transparent',
                    'border-top-color' : '#000000',
                    'margin-left' : -8,
                    'position' : 'absolute',
                    'top' : '100%',
                    'left' : '50%',
                    'height' : 0,
                    'width' : 0
                }).html(' ')
            )
            .appendTo('body');

            this.tooltip.css('top', 
                $(this.element).offset().top - $(this.element).outerHeight(true) - 10);

            this.tooltip.css('left', 
                $(this.element).offset().left + (($(this.element).width()/2) - (this.tooltip.width()/2)) );

            this.tooltip.hide();

            return this;
        }

    }, copyPaste.prototype);

    $.fn.copyPaste = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'copyPaste'))
            {
                $.data(this, 'copyPaste', new copyPaste(this, options));
            }
        });
    }

}(jQuery));

---

$('#mi-input').copyPaste();

---

ejemplo: http://jsfiddle.net/Ldpk7313/

---

si deseas algo automatico y crossbrowser existen varias librerias como zeroClipboard que trabaja con flash player y javascript:

https://github.com/zeroclipboard/ZeroClipboard

o zclip que es la extension de zeroClipboard para jquery: http://www.steamdev.com/zclip/

Answer 2

mmm...a ver te dire mi idea no lo he realizado pero es posible...tendrias que hacer una funcion onclick y haber guardado el contenido en una variable...luego una de pegado...no parece tan complicado