HTML5 implementa função de cópia móvel

A primeira vez que encontrei esse requisito foi por meio do Baidu, mas descobri que eles foram basicamente implementados usando js e a compatibilidade era muito ruim.

No entanto, no processo de pesquisa e tentativa, descobri que ele pode ser totalmente implementado apenas com código CSS. Basta adicionar as seguintes linhas de código às tags que precisam copiar o conteúdo.

 -webkit-touch-callout: todos;-webkit-user-select: todos;-moz-user-select: todos;-ms-user-select: todos;seleção de usuário: todos;

Na verdade, isso significa que a operação do conteúdo pelo usuário não é restrita e o menu padrão do sistema não está desabilitado. Um toque longo exibirá a função de cópia integrada do sistema para cópia.

clipboard.js é um plug-in muito poderoso para colar e copiar, mas quando usado no terminal móvel, podem surgir problemas de compatibilidade. Aqui está uma solução que uso com frequência.

HTML

 <input id=foo1 value=http://www.shellad.com/_2SP__22 (conteúdo a ser copiado) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>Copiar< /botão></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); //Downgrade elegante: número da versão do Safari >=10, avisa que a cópia foi bem-sucedida; caso contrário, avisa que você precisa selecionar manualmente a cópia após selecionando o texto clipboard.on ('sucesso', function(e) { alert('Cópia com sucesso!') console.log($(this)) e.clearSelection(); }); função(e) { alert('Selecione copiar para copiar!') } })

Observe que eu uso um controle de entrada em vez de um div ou span ao salvar o conteúdo a ser copiado. Porque, durante o teste, apenas a entrada tem melhor compatibilidade, não causará problemas e pode garantir a replicação normal. Ao mesmo tempo, o plug-in não suporta o número de versão do Safari <10, portanto, esteja ciente disso.

O texto acima é a implementação HTML5 da função de cópia móvel introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!