Recientemente, debemos darle a HTML5 WebApp para implementar una función de copia en la página: los usuarios pueden seleccionar el texto y emitir el menú Copiar del sistema en el texto de presentación larga, y el usuario puede hacer clic para copiar para la operación de copia, y luego pegar IT a la búsqueda de la tienda de aplicaciones de la aplicación correspondiente. La razón por la que no se usa para saltar directamente a la aplicación de AppStore correspondiente en forma de enlaces es aumentar el peso de la aplicación corporativa promovida a través de la búsqueda de palabras clave de entrada activa del usuario. Entonces, esta función de copia es esencial para la experiencia del usuario.
Probar algunas prácticas, la compatibilidad en la plataforma Android/iOS no es muy buena. En el navegador WeChat, es fácil lograr un texto a largo plazo para estimular el menú del sistema. Pero el rendimiento de otros navegadores no es consistente. Incluyendo la entrada de enfoque de simulación, selección de JavaScript, intente activar el menú del sistema con una etiqueta. Estos métodos tienen defectos compatibles.
1) Aunque se usa una etiqueta con un atributo HREF en el navegador UC y el navegador Baidu, presione Long el texto aparecerá gratis Copiar/seleccionar el menú de texto. Algunos teléfonos Android, en algunos teléfonos Android, el navegador del sistema y el iPhone se consideran enlaces puros, solo aparece el enlace de copia, sin copiar el menú de texto. Además, incluso si solo un pequeño número de navegadores se consideran factibles, esto tendrá un paso más para operar usuarios, aumentando la complejidad. Entonces este plan no es deseable.
2) Con la ayuda de la selección y los métodos de rango, la compatibilidad de diferentes navegadores debe tenerse en cuenta.
Función selectText (elemento) {var doc = document, text = DocGetElementById (elemento), rango, selección; selección = windowgetselection (); } else {alerta (ninguno);}}Desafortunadamente, todos los textos no se pueden seleccionar haciendo clic o presionando a largo plazo en el iPhone Safari (ya que también admite Window.getSelection, por qué el texto no se puede seleccionar de forma predeterminada después de la operación Safari Browser AddRange, deje un mensaje por la razón por la razón ). Por lo tanto, hay defectos en este método. Seleccione activamente el método del área de texto china y adjunte más tarde.
3) Los usuarios de iPhone pueden saber que durante mucho tiempo presionando el área en blanco alrededor del texto en una circunscripción de texto determinado, Safari seleccionará automáticamente el texto en la circunscripción (el texto de destino debe colocarse en un contenedor de bloques DIV independiente). Según esta característica, use el margen CSS para modificarla. Después de las pruebas, independientemente de las plataformas Android e iOS, el navegador del sistema que viene con teléfonos móviles es compatible. En cuanto a los productos móviles de otros fabricantes como el navegador UC y el navegador Baidu, debido a que existen diferentes mecanismos, solo pueden usar la función de replicación gratuita proporcionada por estos menús de navegador.
Por lo tanto, combiné la segunda y tercera vía, utilizando el evento Taphold en JQuery Mobile para simular la copia del sistema de teléfono móvil para la operación de Longtap para resaltar todo el contenido de texto. Mencionemos que los errores compatibles de Taphold no se adjuntarán a la solución en detalle aquí.
Aquí está mi solución. El código específico es el siguiente:
Código HTML:
<Div class = para requisito> <Div class = TIPS TIPS-T> 1. Debe descargarlo por primera vez antes de que entre en efecto <br/> 2. No se puede descargar desde la clasificación </div> <divir class = cparea> <div class = kwd id = kwd> <span> maestro de los tres reinos yanyi optimización del teléfono móvil </span> </div> </div> <div class = cparea> <span class = kdes> < b> ★ </b> Long Presione el marco punteado, copie las palabras clave </span> </div> <a href = https: // itunesapplecom/cn/data-role = button class = download> Vaya a Appstore y busque y busque Descargar </a> </div>
Código JavaScript:
<Script type = text/javaScript> $ (#kwd) bind (taphold, function () {// no es compatible con iPhone/iTouch/iPad safari var doc = document, text = docgetElementById (kwd), range, selección; if (if (if ( DocBodyCreatExTRange) {Range = DocumentBodyCreatExtrange (); );Código CSS clave:
Cparea {Text-Align: Center; 1875em; #212121;Nota: Margen aquí: 2EM es para lograr la función de presión larga de la larga presión del navegador Safari. este 2em. Al final, no solo lo ha sido visualmente consistente con el dibujo de diseño, sino que también logra un menú del sistema de estimulación de larga presión.
Finalmente, agregue la forma completa de admitir Safari:
$ (#kwd) .bind (taphold, function () {var doc = documen, text = docgetElementById (kwd), range, selection; if (DocBodyCreateExRange) {// IE Range = documentBodyCreateTextrange (); RangeMovetoEelementText (text); rangeselect ();} Else if (windowgetSelection) {// ff ch sf selection = windowgetSelection (); ; / Firefox no es compatible 9Ces no Soporte de TextContent Makeelections (0, TextFirstChildTextContentLength, 0, TextFirstChild); }})Lo anterior es todo el contenido de este artículo.