Cómo capturar la selección de un usuario con jQuery

En este sencillo tutorial aprenderemos a capturar con jQuery cuando un usuario copia contenido de una página y la cantidad de caracteres.

Capturar el evento de copiar

Primero vamos a escuchar el evento ‘copy’ por medio de jquery, para esto colocamos:

Código :

>  $("body").on('copy', function (e) {
       // code
    });

En este caso el evento escuchará en todo el body, pero podemos poner el evento para cualquier contenedor de la página.

Capturar el evento de cortar y pegar

Si quisiéramos capturar el evento de cortar y pegar deberíamos tener algo como esto:

Código :

>  $("body").on('copy cut paste', function (e) {
        // code
    });

Luego de que capturamos que el usuario está copiando código vamos a identificar la cantidad de caracteres, para esto usamos:

Código :

>  window.getSelection();

Esta función nos identifica lo que el usuario tiene seleccionado, luego lo convertimos en un String y contamos su longitud de caracteres:

Código :

>  data = new String(window.getSelection());

Saber la cantidad de caracteres

Ahora si hacemos un .length a data sabremos la cantidad de caracteres

Código :

>  data.length

Y quedaría así:

Código :

$("body").on('copy', function (e) {
    data = new String(window.getSelection());
    console.log(data.length);
});

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.