Detectar el tipo de contenido en el portapapeles

Detectar el tipo de contenido en el portapapeles

El portapapeles de un usuario es un "cajón de sastre" entre el sistema operativo y las aplicaciones que se ejecutan en él. Al usar un navegador web, puede resaltar texto o hacer clic con el botón derecho en una imagen y seleccionar "Copiar imagen". Esto me hizo pensar en cómo los desarrolladores pueden detectar lo que hay en el portapapeles.

Puede recuperar el contenido del portapapeles del usuario usando el navigator.clipboard API. Esta API requiere el permiso del usuario porque el portapapeles puede contener datos confidenciales. Puede usar el siguiente código JavaScript para obtener permiso para usar la API del portapapeles:

const result = await navigator.permissions.query({name: "clipboard-write"});
if (result.state === "granted" || result.state === "prompt") {
  // Clipboard permissions available
}

Con los permisos del portapapeles otorgados, consulta el portapapeles para un ClipboardItem instancia con detalles de lo que se copió:

const [item] = await navigator.clipboard.read();

// When text is copied to clipboard....
item.types // ["text/plain"]

// When an image is copied from a website...
item.types // ["text/html", "image/png"]

Una vez que conozca el contenido y el tipo MIME, puede llevar el texto al portapapeles con readText():

const content = await navigator.clipboard.readText();

En el caso de una imagen, si tiene el tipo y contenido MIME, puede usar <img> con un URI de datos para mostrar. ¡Conocer el contenido del portapapeles de un usuario puede ser útil para mostrar exactamente lo que ha copiado!

Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
  • Crear un cubo CSS

    Crear un cubo CSS

    CSS Cubes realmente muestra en qué se ha convertido CSS a lo largo de los años, evolucionando desde simples pautas de color y dimensión hasta un lenguaje capaz de crear imágenes profundas y creativas. Agregue una animación y tendrá algo realmente bueno. Desafortunadamente, cada tutorial de cubo CSS que he leído es un poco...

  • Imágenes reactivas: la guía definitiva

    Imágenes reactivas: la guía definitiva

    Lo más probable es que cualquier diseñador web que utilice nuestra aplicación de prueba de navegador Ghostlab, que permite realizar pruebas sin problemas en todos los dispositivos simultáneamente, haya trabajado con un diseño receptivo de una forma u otra. Y a medida que los sitios web y los dispositivos de hoy en día se vuelven más diversos, una plétora de imágenes receptivas...

  • Complemento FontChecker de MooTools

    Complemento FontChecker de MooTools

    Hay una pieza de código muy interesante en Google Code llamada FontAvailable que realiza una verificación de JavaScript basada en jQuery en una cadena para verificar si su sistema tiene o no una fuente específica en función de su ancho de salida. Porté esta función a MooTools. Las MooTools...

  • Cree una presentación de diapositivas simple usando MooTools, Parte IV: Miniaturas y leyendas

Si quieres conocer otros artículos parecidos a Detectar el tipo de contenido en el portapapeles puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas