Ouvi uma parte do H5 há dois dias. Houve uma frase na reunião. Fiquei muito emocionado: não é que você não possa, mas que você tem requisitos muito baixos para si mesmo. Em uma frase muito simples, acredito que muitas coisas não são impossíveis para todos, mas eles realmente têm requisitos muito baixos para si mesmos. Se você solicitar mais requisitos para si mesmo, poderá fazer maior progresso. Desde que cresce, muitos amigos também ouviram muitas palavras que se motivam a progredir, mas nem todos podem continuar fazendo isso. De fato, isso tem muito a ver com sua personalidade e o ambiente circundante. Só posso dizer que você pode encontrar mais métodos e condições para se incentivar e melhorar constantemente seus requisitos para si mesmo, para que você possa ter a oportunidade de obter mais realizações.
Na segunda metade deste ano, pretendo construir um site chamado "Guia de Desenvolvimento Móvel" no grupo. No processo de criação da estrutura do site, há uma função que precisa copiar o texto para a área de transferência. Acredito que essa função é muito usada, mas é um grande desafio para mim que não escreve o código JS com frequência. Olhando para trás em um site, usei Window.ClipboardData para realizar a cópia para a função da área de transferência e suporta apenas os navegadores IE e FF. Naquela época, encontrei algumas soluções no Baidu, mas desisti se não conseguisse suportar. Mais tarde, fiz um julgamento no código. Se esse atributo não for suportado, alertarei diretamente: esta função não suporta o navegador. Copie o conteúdo na caixa de texto manualmente. Agora penso nisso, sou muito preguiçoso. Hehe, alguém foi baleado ~
alerta ("Esta função não suporta esse navegador, copie manualmente o conteúdo na caixa de texto");Na verdade, não há explicação detalhada na Internet na Internet para realizar a função de cópia para a área de transferência. Muitos artigos são os mesmos milhares de vezes. É bastante doloroso para os sapatos infantis que precisam usar a cópia para a função da área de transferência. Hoje vou compartilhar esta parte. Devido à habilidade limitada, dê -me alguns conselhos sobre os erros ~
Acredito que muitos estudantes que construíram um site usando o WordPress sabem que ele usa jQuery. Eles não estão familiarizados com o jQuery e são muito simples de usar. Infelizmente, o próprio jQuery não percebe a função de copiar para a área de transferência, mas talvez sua API tenha essa função. Desta vez, o site que construí usa o WordPress e passou algum tempo procurando a API para copiar o jQuery para a área de transferência. Há também: JQuery Zeroclipboard, então eu o usei para simplesmente implementar a cópia na área de transferência no WordPress. Mas, o JQuery Zeroclipboard acabou sendo um pai chamado Zero Clipboard.
A Zero Armolboard é uma biblioteca JS independente que usa flash para copiar, exigindo dois arquivos: Zeroclipboard.js e Zeroclipboard.swf. Existem duas versões na internet. O princípio da implementação é copiado usando o flash. Não sei a quem a criação original pertence ou aos dois irmãos da família, então não me importo com isso. Enquanto nos respeitarmos os direitos autorais e expressarmos uma consciência clara, a versão que apresentarei a você hoje é relativamente simples.
Primeiro, vejamos a figura a seguir. O objeto Flash gerado após o uso de uma área de transferência zero. É compatível com Flash10 e as seguintes versões e é compatível com todos os navegadores:
Endereço oficial da Zero Clipboard: http://zeroclipboard.org/, Github Endereço: https://github.com/zeroclipboard/zeroclipboard
Use -o para criar um ambiente de servidor. Alguns estudantes podem não estar claros sobre isso. Existem muitos métodos para criar um ambiente de servidor, como XP ou IIS que vem com o sistema Win7. Você também pode usar os pacotes XAMPP, APPSERV, APMSERV e outros pacotes de integração para instalar. É muito simples de construir. Eu não vou apresentá -lo aqui ~
Agora, usamos primeiro a Biblioteca JS Independent Zero, para simplesmente implementar a cópia da função da área de transferência, e a demonstração é a seguinte:
<! DOCTYPE html> <html> <head> <title> Teste de quadro de zero zero </title> <meta charset = "utf-8"> </head> <body> <!-
ilustrar:
1.Data-Clipboard-Target Digite o ID do objeto a ser copiado
-> <botão id = "d_clip_button" Data-clipboard-target = "fe_text"> <b> copiar para a área de clipboard </b> </button> <br/> <texttarea id = "fe_text" cols = "50" lobs = "3"> inserir o que precisa ser copiado </textarea> </bodybod src = "zeroclipboard.js"> </script> <script type = "text/javascript"> // define um novo objeto de cópia var clip = new Zeroclipboard (document.getElementById ("d_clip_button"), {"filme:" Zeroclipboard.swf "}); function (cliente, args) {alert ("copiar com sucesso, copiar o conteúdo é:"+ args.text);}); </script>Download de demonstração (lembrete quente: alunos que baixam o código, lembre -se de usar o ambiente do servidor ao navegar na demonstração, caso contrário, não haverá efeito ~)
As funções do zero quadro de transferência foram introduzidas nos comentários do código acima. Para mais funções, vá para https://github.com/zeroclipboard/zeroclipboard
Em seguida, apresente o JQuery Zeroclipboard
O JQuery Zeroclipboard é uma melhoria baseada em Zeroclipboard, denominada ZClip para abreviar. Como a API do JQuery, o JQuery Zeroclipboard também executa operações muito simples. O endereço oficial é: http://www.steamdev.com/zclip/
Antes do uso, você precisa se referir a 2 arquivos JS: jquery.js e jquery.zclip.js
<script type = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/jQuery.zclip.js"> </script>
Agora usamos o jQuery.zclip.js para simplesmente implementar a demonstração da cópia para a Clipboard da seguinte forma:
<! Doctype html> <html> <head> <title> teste de zeroclipboard </title> <meta charset = "utf-8"> <style type = "text/csS">. Linha {margin-bottom: 20px;}/* cópia*/. -20px -80px; cor de fundo: rgba (0, 0, 0, 0.2); filtro: progid: dximageTransform.microsoft.gradient (startColorstr =#30000000, endcolorstr =#30000000); Padding: 6px;}. #F4d9a6; cor de fundo: #fffdee; font-size: 14px;} </style> <script type = "text/javascript" src = "jquery.js"> </script> <script type = "text/javascript" src = "jquery.zclip.js"> Copie o texto atual </h2> <a href = "#note"> clique para me copiar </a> </div> <div> <h2> Demo2 Clique para copiar o texto no formulário </h2> <a href = "#nenhum"> clique para copiar o texto no texto na cópia </a> <input = "text"/"/"> Enter o que type = "text/javascript"> $ (document) .ready (function () {/* define todas as classes como tags de copiar e, após clicar, você pode copiar o texto do objeto clicado*/$ (". cópia"). mouse*/$ (this) .css ("cor", "laranja");}, pós-cópia: function () {/*operação após cópia bem-sucedida*/var com sucesso </div> </div> "); $ (" corpo "). encontre (". copy-tips "). remover (). end (). Anexar ($ copysuc); $ (". copia-tips "). "Zeroclipboard.swf", cópia: function () {return $ (this) .parent (). Find (". Input"). com sucesso </div> </div> "); $ (" corpo "). Find (". Copy-tips "). Remone (). end (). Anexe ($ copysuc); $ ("Download de demonstração (lembrete quente: alunos que baixam o código, lembre -se de usar o ambiente do servidor ao navegar na demonstração, caso contrário, não haverá efeito ~)
O código acima combina as funções dos nós de operação do jQuery e desempenha bem o papel de jQuery.zclip.js, como antes e depois da cópia, inserindo dinamicamente nós. Também pode ser visto que o poder do jQuery.zclip.js é muito simples de usar. Se você precisar saber mais sobre as funções do jquery.zclip.js, vá para http://www.steamdev.com/zclip/
A partir das bibliotecas JS independentes acima, Zeroclipboard.js e jQuery.zclip.js usam flash para implementar a função de copiar para a área de transferência. Pode -se observar que o uso do Zeroclipboard.js traz relativamente poucas funções, mas é uma biblioteca independente com arquivos relativamente pequenos. As funções após o uso de jquery.zclip.js são relativamente ricas. No entanto, para sites que não usam a estrutura do jQuery, o uso de jquery.zclip.js é um desperdício de banda larga. Qual método de cópia usar depende do posicionamento específico do produto ~
O exposto acima está a implementação do JS de copiar conteúdo para a função da área de transferência que o editor introduzido em você é compatível com todos os navegadores (recomendados). Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!