HTML5 implementa la función de copia móvil

La primera vez que encontré esta demanda fue a través de varios Baidu, pero descubrí que básicamente se implementaban usando js y la compatibilidad era muy pobre.

Sin embargo, en el proceso de búsqueda y prueba, descubrí que se puede implementar completamente solo con código CSS. Simplemente agregue las siguientes líneas de código a las etiquetas que necesitan copiar el contenido.

 -webkit-touch-callout: todos;-webkit-user-select: todos;-moz-user-select: todos;-ms-user-select: todos;user-select: todos;

De hecho, significa que la operación del contenido por parte del usuario no está restringida y que el menú predeterminado del sistema no está deshabilitado. Al presionar prolongadamente se mostrará la función de copia del sistema para copiar.

clipboard.js es un complemento muy potente para pegar y copiar, pero cuando se utiliza en el terminal móvil, pueden surgir problemas de compatibilidad. Aquí hay una solución que uso a menudo.

HTML

 <input id=foo1 value=http://www.shellad.com/_2SP__22 (contenido a copiar) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>Copiar< /botón></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); //Desactualización elegante: número de versión de Safari >=10, indica que la copia se realizó correctamente; de ​​lo contrario, indica que debe seleccionar manualmente la copia después seleccionando el texto clipboard.on ('éxito', function(e) { alert('¡Copia exitosa!') console.log($(this)) e.clearSelection(); }); función(e) { alert('¡Seleccione copiar para copiar!') } });

Tenga en cuenta que utilizo un control de entrada en lugar de un div o span cuando guardo el contenido que se va a copiar. Porque, durante las pruebas, solo la entrada tiene la mejor compatibilidad, no causará problemas y puede garantizar una replicación normal. Al mismo tiempo, el complemento no es compatible con el número de versión de Safari <10, así que tenga esto en cuenta.

Lo anterior es la implementación HTML5 de la función de copia móvil introducida por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!