Recentemente, precisamos dar ao HTML5 WebApp para implementar uma função de cópia na página: os usuários podem selecionar o texto e exibir o menu de cópia do sistema no texto de pressão longa, e o usuário pode clicar para copiar para a operação de cópia e depois colar Para a pesquisa de AppStore, procure o aplicativo correspondente. A razão pela qual ele não é usado para pular diretamente para o aplicativo correspondente da AppStore na forma de links é aumentar o peso do aplicativo corporativo promovido por meio da pesquisa de palavras -chave de entrada ativa do usuário. Portanto, essa função de cópia é essencial para a experiência do usuário.
Tentando algumas práticas, a compatibilidade na plataforma Android/iOS não é muito boa. No navegador WeChat, é fácil obter texto longo para estimular o menu do sistema. Mas o desempenho de outros navegadores não é consistente. Incluindo entrada de foco de simulação, seleção de javascript, tente ativar o menu do sistema com uma tag. Esses métodos têm defeitos compatíveis.
1) Embora uma tag com um atributo href seja usado no navegador UC e no navegador Baidu, pressione há muito tempo que o texto aparecerá gratuito/selecione o menu de texto. Alguns telefones Android, em alguns telefones Android, o navegador do sistema e o iPhone são considerados links puros, apenas o link de cópia aparece, sem copiar o menu de texto. Além disso, mesmo que apenas um pequeno número de navegadores seja considerado viável, isso terá um passo mais para operar usuários, aumentando a complexidade. Portanto, este plano não é desejável.
2) Com a ajuda dos métodos de seleção e alcance, a compatibilidade de diferentes navegadores precisa ser levada em consideração.
Função SelectText (Element) {var doc = Document, Text = DocgetElementById (Element), Raje, Seleção; seleção = WindowGetSelect (); } else {alert (nenhum);}}Infelizmente, todos os textos não podem ser selecionados clicando ou pressionando há muito tempo -Lit no iPhone Safari (como também suporta window.getSelection, por que o texto não pode ser selecionado por padrão após a operação do AddRange do navegador Safari, deixe uma mensagem para o motivo ). Portanto, existem defeitos neste método. Selecione ativamente o método da área de texto chinês e anexe -o mais tarde.
3) Os usuários do iPhone podem saber que pressiona há muito tempo a área em branco ao redor do texto em um determinado círculo eleitoral de texto, o Safari selecionará automaticamente o texto no círculo eleitoral (o texto de destino precisa ser colocado em um contêiner de bloco DIV independente). Com base nesse recurso, use a margem CSS para modificá -lo. Após o teste, independentemente das plataformas Android e iOS, o navegador do sistema que vem com telefones celulares é compatível. Quanto aos produtos móveis de outros fabricantes, como o navegador UC e o navegador Baidu, porque existem mecanismos diferentes, eles só podem usar a função de replicação gratuita fornecida por esses menus do navegador.
Portanto, combinei a segunda e a terceira maneira, usando o evento Taphold no JQuery Mobile para simular a cópia do sistema de telefones celulares para a operação Longtap. Vamos mencionar que os bugs compatíveis de Taphold não serão anexados à solução em detalhes aqui.
Aqui está minha solução. O código específico é o seguinte:
Código HTML:
<div class = para requisito> <Div Class = Tips Tips-t> 1. Você deve baixá-lo pela primeira vez antes de entrar em vigor <br/> 2. Não é possível fazer o download do ranking </div> <div class = cparea> <div class = kwd id = kwd> <pan> mestre dos três reinos yanyi celular otimização </span> </div> </div> <div class = cparea> <span class = kdes> < b> ★ </b> Pressione há muito tempo o quadro pontilhado, copie palavras-chave </span> </div> <a href = https: // iTunesApppleCom/cn/data-role = Button Class = Download> Vá para AppStore para pesquisar e Download </a> </div>
Código JavaScript:
<Script type = text/javascript> $ (#kwd) bind (taphold, function () {// não suporta iPhone/iTouch/iPad Safari var doc = document DocbodyCreeTextRange) {Range = DocumentbodyCreeTeTextRange (); );Código CSS -chave:
Cparea {text-align: Centro; 1875M; #212121;NOTA: Margem aqui: 2em é para alcançar a função de prospectiva longa da longa prensagem do navegador Safari. este 2em. No final, não apenas o visualmente consistente com o desenho do design, mas também atinge um menu do sistema de estimulação de prospectivos longos.
Por fim, adicione a maneira completa de apoiar o Safari:
$ (#kwd) .bind (taphold, function () {var doc = documen, text = docgetElementById (kwd), intervalo, seleção; if (docbodycratexRange) {// range = documentbodycodycreateTexTrange (); rangeMovetoElementText (text); ) ; 9-dos não Suportar o TextContent MakeSelection (0, TextFirstChildTextContentLength, 0, TextFirstChild); }}); Sel = WindowGetSelection ();O acima é todo o conteúdo deste artigo.