Escuché una parte de H5 hace dos días. Hubo una oración en la reunión. Estaba muy conmovido: no es que no puedas, sino que tienes requisitos demasiado bajos para ti mismo. En una oración muy simple, creo que muchas cosas no son imposibles para todos, pero realmente tienen requisitos demasiado bajos para ellos mismos. Si solicita más requisitos para usted, puede hacer un mayor progreso. Desde que crecía, muchos amigos también han escuchado muchas palabras que se motivan a progresar, pero no todos pueden seguir haciéndolo. De hecho, esto tiene mucho que ver con su personalidad y el entorno circundante. Solo puedo decir que puede encontrar más métodos y condiciones para fomentarse y mejorar constantemente sus requisitos para usted, para que pueda tener la oportunidad de lograr más logros.
En la segunda mitad de este año, planeo construir un sitio llamado "Guía de desarrollo móvil" en el grupo. En el proceso de construcción del marco del sitio web, hay una función que necesita copiar texto al portapapeles. Creo que esta función se usa muy comúnmente, pero es un gran desafío para mí que no escribe el código JS con frecuencia. Mirando hacia atrás en un sitio que utilicé Window.ClipboardData para realizar la copia de la función del portapapeles, y solo admite los navegadores IE y FF. En ese momento, encontré algunas soluciones en Baidu, pero me di por vencido si no podía soportarlo. Más tarde, hice un juicio en el código. Si este atributo no es compatible, alertaré directamente: esta función no admite el navegador. Copie el contenido en el cuadro de texto manualmente. Ahora lo pienso, soy realmente vago. Jeje, ¿alguien ha sido disparado ~
alerta ("Esta función no admite este navegador, por favor copie manualmente el contenido en el cuadro de texto");En realidad, no hay una explicación detallada en Internet en Internet para realizar la función de copia al portapapeles. Muchos artículos son los mismos miles de veces. Es bastante doloroso para los zapatos para niños que necesitan usar la copia para la función de portapapeles. Hoy compartiré esta parte. Debido a la capacidad limitada, dame algunos consejos sobre los errores ~
Creo que muchos estudiantes que han construido un sitio usando WordPress saben que usa jQuery. No están familiarizados con jQuery y son muy simples de usar. Desafortunadamente, JQuery en sí no se da cuenta de la función de copiar al portapapeles, pero tal vez su API tendrá esta función. Esta vez, el sitio que construí usa WordPress y pasó algo de tiempo buscando la API para copiar jQuery al portapapeles. También hay: jQuery ZeroClipboard, por lo que lo usé para simplemente implementar la copia en el portapapeles en WordPress. Pero, JQuery ZeroClipboard resultó ser un padre llamado Portapaplos Zero.
Zero Portapples es una biblioteca JS independiente que usa Flash para copiar, que requiere dos archivos: ZeroClipboard.js y ZeroClipboard.swf. Hay dos versiones en Internet. El principio de implementación se copia usando Flash. No sé a quién pertenece la creación original, o a los dos hermanos de la familia, por lo que no me importa esto. Mientras respetemos los derechos de autor nosotros mismos y expresemos una conciencia clara, la versión que presentaré hoy es relativamente simple.
Primero, veamos la siguiente figura. El objeto flash generado después de usar Zero Portapapook. Es compatible con Flash10 y las siguientes versiones y es compatible con todos los navegadores:
Dirección oficial de Zero Portaplable: http://zeroclipboard.org/, dirección de Github: https://github.com/zeroclipboard/zeroclipboard
Úselo para construir un entorno de servidor. Es posible que algunos estudiantes no tengan claro al respecto. Existen muchos métodos para construir un entorno de servidor, como XP o IIS que viene con el sistema WIN7. También puede usar XAMPP, AppServ, APMServ y otros paquetes de integración para instalar. Es muy simple de construir. No lo presentaré aquí ~
Ahora usamos primero el portapapeles cero de la biblioteca JS independiente para simplemente implementar la copia en la función del portapapeles, y la demostración es la siguiente:
*
ilustrar:
1. Data-Clipboard-Target Ingrese la ID del objeto a copiar
-> <botón id = "d_clip_button" data-clipboard-target = "fe_text"> <b> Copiar al portapapeles </b> </boton> <br/> <textarea id = "fe_text" cols = "50" Rows = "3"> Ingrese lo que necesita ser copiado </textarea> </farth body> </html> <script type = "text/jawrcript" src = "zeroClipboard.js"> </script> <script type = "text/javaScript"> // Definir un nuevo objeto de copia var clip = new ZeroClipboard (document.getElementById ("d_clip_button"), {pinepath: "ZeroClipboard.swf" "}); args) {alerta ("Copiar con éxito, copiar contenido es:"+ args.text);}); </script>Descarga de demostración (Recordatorio cálido: los estudiantes que descargan el código, recuerden usar el entorno del servidor al navegar por la demostración, de lo contrario no habrá efecto ~)
Las funciones del portapapeles cero se han introducido en los comentarios del código anterior. Para obtener más funciones, visite https://github.com/zeroclipboard/zeroClipboard
A continuación, presente jQuery ZeroClipboard
JQuery ZeroClipboard es una mejora basada en ZeroClipboard, denominada ZCLIP para abreviar. Como API de jQuery, JQuery ZeroClipboard también realiza operaciones muy simples. La dirección oficial es: http://www.steamdev.com/zclip/
Antes de usar, debe consultar 2 archivos JS: jQuery.js y jquery.zclip.js
<script type = "text/javaScript" src = "js/jquery.js"> </script> <script type = "text/javaScript" src = "js/jquery.zclip.js"> </script>
Ahora usamos jQuery.zclip.js para simplemente implementar la demostración de copia al portapapeles de la siguiente manera:
<! Doctype html> <html> <fead> <title> ZeroClipboard test </title> <meta charset = "utf-8"> <style type = "text/css">. Línea {margin-bottom: 20px;}/* copia indicada*/. Copia {posición: fija; z-idex: 999; 50%; -20px -80px; color de fondo: rgba (0, 0, 0, 0.2); filtro: progid: dximagetransform.microsoft.gradient (startColorStr =#30000000000, endcolorStr =#30000000); relleno: 6px;}. Copy-tips-wrap {padding: 10px 20px; textalign: border; border; border; #F4d9a6; background-color: #fffdee; font-size: 14px;} </style> <script type = "text/javaScript" src = "jquery.js"> </script> <script type = "text/javascript" src = "jquery.zclip.js"> </script> </script> <body> <hiv> <hiv> <h2> Demo1 to Golte texto </h2> <a href = "##none"> haga clic para copiarme </a> </div> <div> <h2> Demo2 Haga clic para copiar el texto en el formulario </h2> <a href = "#none"> haga clic para copiar el texto en el orden de copia </a> <tipo de entrada = "text" value = "ingresar qué copiar"/> </div> </body> </html> type = "text/javaScript"> $ (documento) .Ready (function () {/* Define todas las clases como etiquetas de copia, y después de hacer clic, puede copiar el texto del objeto hecho clic*/$ (". mouse*/$ (this) .css ("color", "naranja");}, detomCopy: function () {/*operación después de copia exitosa*/var $ copySuc = $ ("<div class = 'copy-tips'> <div class = 'copy-tips-wrap'> ☺ con éxito </div> </div> "); $ (" cuerpo "). find (". Copy-tips "). remove (). End (). Append ($ CopySuc); $ (". "ZeroClipboard.swf", Copy: function () {return $ (this) .parent (). Find (". Input"). Val ();}, detomCopy: function () {/* operación después de copiar*/var $ copysuc = $ ("<Div class = 'Copy-tips'> <divs de divs = 'copy-tips-wrap'> ☺ copy con éxito </div> </div> "); $ (" cuerpo "). Find (".Descarga de demostración (Recordatorio cálido: los estudiantes que descargan el código, recuerden usar el entorno del servidor al navegar por la demostración, de lo contrario no habrá efecto ~)
El código anterior combina las funciones de los nodos de operación de JQuery y juega bien el papel de jQuery.zclip.js, como antes y después de copiar, insertar nodos dinámicos. También se puede ver que el poder de jQuery.zclip.js es muy simple de usar. Si necesita saber más sobre las funciones de jquery.zclip.js, visite http://www.steamdev.com/zclip/
De las bibliotecas JS independientes anteriores ZeroClipboard.js y jquery.zclip.js usan Flash para implementar la función de copiar en el portapapeles. Se puede ver que el uso de ZeroClipboard.js trae relativamente pocas funciones, pero es una biblioteca independiente con archivos relativamente pequeños. Las funciones después de usar jQuery.zclip.js son relativamente ricas. Sin embargo, para los sitios que no usan el marco jQuery, usar jQuery.zclip.js es un desperdicio de banda ancha. Qué método de copia para usar depende del posicionamiento específico del producto ~
Lo anterior es la implementación JS de copiar contenido a la función de portapapeles que el editor que le presentó es compatible con todos los navegadores (recomendado). Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!