Cortar, copiar y pegar en JavaScript
El navegador permite que las secuencias de comandos de JavaScript lean y escriban en el portapapeles y copie o pegue contenido automáticamente. En normal, los scripts no deben modificar el portapapeles del usuario para no cumplir con las expectativas del usuario. Sin embargo, a veces puede ser conveniente hacer esto, como la función de “copia con un clic”, el usuario hace clic en un botón y el contenido especificado se ingresa automáticamente en el portapapeles. Actualmente, hay tres formas de implementar las operaciones del portapapeles.
Doc.execCommand()método- API de portapapeles asíncrono
copy,reduceypasteEventos
Este artículo presenta estos tres métodos uno por uno. Este es mi artículo número 37 de Medium.
Doc.execCommand() es el método tradicional de manipular el portapapeles, que es suitable con varios navegadores. Admite las tres operaciones de copiar, cortar y pegar.
Doc.execCommand('copy')– CopiarDoc.execCommand('reduce')– CorteDoc.execCommand('paste')– pegar
Operación de copiar o cortar
Al copiar, primero seleccione el texto y luego llame al Doc.execCommand('copy')el texto seleccionado entrará en el portapapeles.
En el ejemplo anterior, el script primero selecciona el texto en el inputElement del cuadro de entrada ( inputElement.choose() ), y entonces Doc.execCommand('copy') lo copia en el portapapeles. Tenga en cuenta que la operación de copia se coloca mejor en la función de escucha de eventos, activada por el usuario (por ejemplo, el usuario hace clic en un botón). Si el script se ejecuta de forma autónoma, algunos navegadores pueden informar de un error. La operación de corte también es related a la operación de copia.
Pegar operación
Al pegar, llamar Doc.execCommand('paste') enviará el contenido del portapapeles al elemento de enfoque precise.
Desventaja
Aunque el Doc.execCommand() método es conveniente, tiene algunas desventajas. En primer lugar, solo puede copiar el contenido seleccionado en el portapapeles y no puede escribir contenido en el portapapeles de forma arbitraria. En segundo lugar, es una operación asíncrona. Si copia/pega una gran cantidad de datos, la página se congelará. Algunos navegadores también mostrarán un cuadro emergente y pedirán permiso al usuario. En este momento, la página dejará de responder antes de que el usuario haga una elección. Para resolver estos problemas, los proveedores de navegadores han propuesto una API de portapapeles asíncrona.
Clipboard API es el método de operación de portapapeles de próxima generación, que es más poderoso y razonable que el tradicional Doc.execCommand() método. Todas sus operaciones son asíncronas y devuelven objetos Promise sin causar atascos de página. Además, puede colocar contenido arbitrario (como imágenes) en el portapapeles. Él navigator.clipboard La propiedad devuelve el objeto Portapapeles y todas las operaciones se realizan a través de este objeto.
const clipboardObj = navigator.clipboard;
Si el navigator.clipboard devoluciones de propiedad undefinedsignifica que el navegador precise no es suitable con esta API (puede ver la tabla de compatibilidad completa en Puedo usar…). Dado que los usuarios pueden colocar datos confidenciales (como contraseñas) en el portapapeles, permitir que los scripts los lean arbitrariamente generará riesgos de seguridad, por lo que esta API tiene más restricciones de seguridad. En primer lugar, el navegador Chrome estipula que solo las páginas del protocolo HTTPS pueden usar esta API. Sin embargo, el entorno de desarrollo (localhost) permite el uso de protocolos no cifrados. En segundo lugar, el permiso del usuario debe obtenerse claramente al llamar. La implementación específica de permisos utiliza la API de permisos. Hay dos permisos relacionados con el portapapeles: clipboard-write (permiso de escritura) y clipboard-read (permiso de lectura). El “permiso de escritura” se otorga automáticamente al script, y el “permiso de lectura” debe ser otorgado explícitamente por el usuario. En otras palabras, la secuencia de comandos se puede completar automáticamente al escribir en el portapapeles, pero al leer el portapapeles, el navegador mostrará un cuadro de diálogo que le preguntará si el usuario acepta leer.
Además, cabe señalar que lo que lee el script es siempre el portapapeles de la página precise. Un problema que esto trae es que si pega el código relevante en la herramienta de desarrollo y lo ejecuta directamente, se puede informar un error porque la página precise en este momento es la ventana de la herramienta de desarrollo, no una página net.
Si pega el código anterior en la herramienta de desarrollo y lo ejecuta, se informará un error. Porque cuando se ejecuta el código, la ventana de la herramienta de desarrollo es la página precise y no hay una interfaz DOM de la que dependa la API del portapapeles en esta página. Una solución es colocar el código relevante en setTimeout() para retrasar la ejecución y hacer clic rápidamente en la ventana de la página del navegador antes de llamar a la función para convertirla en la página precise.
Después de pegar el código anterior en la herramienta de desarrollador para ejecutarlo, haga clic rápidamente en la ventana de la página net para convertirla en la página precise, de modo que no se informe ningún error.
objeto del portapapeles
portapapeles.readText()
Él clipboard.readText() El método se utiliza para copiar los datos de texto en el portapapeles.
En el ejemplo anterior, después de que el usuario haga clic en la página, se generará el texto en el portapapeles. Tenga en cuenta que el navegador mostrará un cuadro de diálogo emergente en este momento, preguntando al usuario si está de acuerdo con el script para leer el portapapeles.
Si el usuario no está de acuerdo, el script informará un error. En este momento, puede utilizar el strive...catch Estructura para manejar errores.
portapapeles.leer()
Él clipboard.learn() El método se utiliza para copiar los datos en el portapapeles, que pueden ser datos de texto o datos binarios (como imágenes). Este método requiere permiso explícito del usuario. Este método devuelve un objeto Promise. Una vez que se resuelve el estado del objeto, se puede obtener una matriz y cada miembro de la matriz es una instancia de un objeto ClipboardItem.
El objeto ClipboardItem representa un solo elemento de clip y cada elemento de clip tiene un clipboardItem.varieties propiedad y un clipboardItem.getType() método. Él clipboardItem.varieties La propiedad devuelve una matriz cuyos miembros son los tipos MIME disponibles para el elemento de clip. Por ejemplo, un elemento de clip se puede pegar en formato HTML o en formato de texto sin formato. Entonces tiene dos tipos MIME (textual content/html y textual content/plain). Él clipboardItem.getType(kind) El método se utiliza para leer los datos del elemento del clip y devuelve un objeto Promise. Este método acepta el tipo MIME del elemento del clip como parámetro y devuelve los datos de ese tipo. Este parámetro es obligatorio, de lo contrario, se informará un error.
portapapeles.escribirTexto()
Él clipboard.writeText() El método se utiliza para escribir contenido de texto en el portapapeles.
El ejemplo anterior es que después de que el usuario hace clic en la página net, el script escribe datos de texto en el portapapeles. Este método no requiere permiso del usuario, pero es mejor ponerlo en strive...catch para prevenir errores.
portapapeles.escribir()
Él clipboard.write() El método se utiliza para escribir datos arbitrarios en el portapapeles, que pueden ser datos de texto o datos binarios. Este método acepta una instancia de ClipboardItem como parámetro, que representa los datos escritos en el portapapeles.
En el ejemplo anterior, el script escribe una imagen en el portapapeles. Tenga en cuenta que el navegador Chrome actualmente (hasta que este escritor escriba este artículo) solo admite la escritura de imágenes en formato PNG. clipboardItem() es un constructor proporcionado de forma nativa por el navegador para generar una instancia de clipboardItem. Acepta un objeto como parámetro. El nombre clave del objeto es el tipo MIME de los datos y el valor clave son los datos mismos. El siguiente ejemplo es para escribir el valor del mismo elemento de clip en múltiples formatos en el portapapeles, uno son datos de texto y el otro son datos binarios para pegar en diferentes ocasiones.
Cuando el usuario pone datos en el portapapeles, el copy se activará el evento. El siguiente ejemplo es para convertir el texto que el usuario pone en el portapapeles a mayúsculas.
En el ejemplo anterior, el clipboardData La propiedad del objeto de evento contiene los datos del portapapeles. Es un objeto con las siguientes propiedades y métodos.
Occasion.clipboardData.setData(kind, information): Para modificar los datos del portapapeles, debe especificar el tipo de datos.Occasion.clipboardData.getData(kind): Para obtener datos del portapapeles, debe especificar el tipo de datos.Occasion.clipboardData.clearData((kind)): borre los datos del portapapeles, puede especificar el tipo de datos. Si no especifica el tipo, se borrarán todos los tipos de datos.Occasion.clipboardData.objects: un objeto related a una matriz contiene todos los elementos de clip, pero normalmente solo hay un elemento de clip
El siguiente ejemplo es para interceptar la operación de copia del usuario y colocar el contenido especificado en el portapapeles.
En el ejemplo anterior, primero, use e.preventDefault() para cancelar la operación predeterminada del portapapeles, y luego el script se hace cargo de la operación de copia. Él reduce El evento se activa cuando el usuario realiza una operación de corte. Su procesamiento es exactamente el mismo que el copy evento, y los datos de corte también se obtienen de la Occasion.clipboardData propiedad.
Cuando el usuario utiliza los datos del portapapeles para pegar, el paste se activará el evento. El siguiente ejemplo es para interceptar la operación de pegado, la secuencia de comandos elimina los datos del portapapeles.
