이틀 전에 H5의 몫을 들었습니다. 회의에서 문장이있었습니다. 나는 매우 감동했다. 그것은 당신이 할 수 없다는 것이 아니라 자신에 대한 요구 사항이 너무 낮다는 것입니다. 매우 간단한 문장에서, 나는 모든 사람이 할 수있는 일이 불가능하지는 않지만 실제로는 너무 낮은 요구 사항을 가지고 있다고 생각합니다. 더 많은 요구 사항을 스스로 요구하면 더 큰 진전을 이룰 수 있습니다. 자라면서 많은 친구들이 발전하도록 동기를 부여하는 많은 단어를 들었지만 모든 사람이 계속 할 수있는 것은 아닙니다. 실제로 이것은 성격과 주변 환경과 관련이 있습니다. 나는 당신이 자신을 격려 할 수있는 더 많은 방법과 조건을 찾을 수 있고, 더 많은 성과를 달성 할 수있는 기회를 가질 수 있도록 더 많은 방법과 조건을 찾을 수 있다고 말할 수 있습니다.
올해 하반기에는 그룹에서 "모바일 개발 가이드"라는 사이트를 구축 할 계획입니다. 웹 사이트 프레임 워크를 구축하는 과정에서 텍스트를 클립 보드에 복사 해야하는 기능이 있습니다. 나는이 기능이 매우 일반적으로 사용된다고 생각하지만 JS 코드를 자주 쓰지 않는 것은 큰 도전입니다. 사이트를 되돌아 보면 Window.clipboardData를 사용하여 클립 보드 기능에 대한 사본을 실현하고 IE 및 FF 브라우저 만 지원했습니다. 당시 바이두에서 몇 가지 해결책을 찾았지만 참을 수 없다면 포기했습니다. 나중에 나는 코드에서 판단을했다. 이 속성이 지원되지 않으면 직접 경고합니다.이 기능은 브라우저를 지원하지 않습니다. 텍스트 상자의 내용을 수동으로 복사하십시오. 이제 나는 그것에 대해 생각합니다. 정말 게으 릅니다. hehe, 누구든지 총에 맞았습니다 ~
ALERT ( "이 기능은이 브라우저를 지원하지 않으므로 텍스트 상자에 내용을 수동으로 복사하십시오");
인터넷의 인터넷에서 클립 보드 기능에 대한 사본을 실현하기 위해 실제로 자세한 설명은 없습니다. 많은 기사는 수천 번입니다. 사본을 클립 보드 기능에 사용해야하는 어린이 신발에는 상당히 고통 스럽습니다. 오늘 나는이 부분을 공유 할 것입니다. 능력이 제한되어 있기 때문에 오류에 대한 조언을 해주세요 ~
WordPress를 사용하여 사이트를 지은 많은 학생들은 그것이 jQuery를 사용한다는 것을 알고 있다고 생각합니다. 그들은 jQuery에 익숙하지 않으며 사용하기가 매우 간단합니다. 불행하게도, jQuery 자체는 클립 보드에 복사하는 기능을 인식하지 못하지만 아마도 API는이 기능을 가질 것입니다. 이번에는 내가 만든 사이트는 WordPress를 사용하여 jQuery를 클립 보드에 복사하기 위해 API를 검색하는 데 시간을 보냈습니다. jQuery Zeroclipboard도 있습니다. 그래서 나는 그것을 사용하여 WordPress의 클립 보드에 사본을 구현하는 데 사용했습니다. 그러나 jQuery Zeroclipboard는 Zero Clipboard라는 아버지로 판명되었습니다.
Zero Clipboard는 복사를 위해 Flash를 사용하는 독립형 JS 라이브러리입니다. 인터넷에는 두 가지 버전이 있습니다. 구현 원리는 플래시를 사용하여 복사됩니다. 나는 원래 창조물이 누구인지, 또는 가족의 두 형제에 속하는 지 모르겠으므로 이것에 관심이 없습니다. 우리가 저작권을 존중하고 분명한 양심을 표현하는 한, 오늘 내가 소개 할 버전은 비교적 간단합니다.
먼저 다음 그림을 살펴 보겠습니다. 제로 클립 보드를 사용한 후 생성 된 플래시 객체. Flash10 및 다음 버전과 호환되며 모든 브라우저와 호환됩니다.
제로 클립 보드의 공식 주소 : http://zeroclipboard.org/, github 주소 : https://github.com/zeroclipboard/zeroclipboard
서버 환경을 구축하는 데 사용하십시오. 일부 학생들은 명확하지 않을 수 있습니다. Win7 시스템과 함께 제공되는 XP 또는 II와 같은 서버 환경을 구축하는 방법에는 여러 가지가 있습니다. XAMPP, AppServ, APMSERV 및 기타 통합 패키지를 사용하여 설치할 수도 있습니다. 건축하는 것은 매우 간단합니다. 나는 여기서 그것을 소개하지 않을 것이다 ~
이제 먼저 독립적 인 JS 라이브러리 제로 클립 보드를 사용하여 클립 보드 함수에 사본을 구현하며 데모는 다음과 같습니다.
<! doctype html> <html> <head> <title> 제로 클립 보드 테스트 </title> <meta charset = "utf-8"> </head> <body> <!-
설명 :
1.Data-Clipboard-Target 복사 할 객체의 ID를 입력하십시오.
-> <button id = "d_clip_button"data-clipboard-target = "fe_text"> <b> 클립 보드에 복사 </b> </button> <br/> <textarea id = "fe_text"cols = "50"rows = "3"> 복사해야 할 필요가 무엇인지 입력하십시오 </html> <script = "text/javascript" src = "zeroclipboard.js"> </script> <script type = "text/javaScript"> // 새 복사 객체 정의 var var clip = new Zeroclipboard (document.getElementByid ( "d_clip_button"), {moviepath : "Zeroclipboard.swf"}); function (client, args) {alert ( "성공적으로 복사, 내용을 복사합니다 :"+ args.text);}); </script>데모 다운로드 (따뜻한 알림 : 코드를 다운로드하는 학생, 데모를 탐색 할 때 서버 환경을 사용해야합니다. 그렇지 않으면 효과가 없습니다 ~)
제로 클립 보드의 기능은 위의 코드 주석에 소개되었습니다. 더 많은 기능을 보려면 https://github.com/zeroclipboard/zeroclipboard를 방문하십시오
다음으로 jQuery Zeroclipboard를 소개하십시오
JQuery Zeroclipboard는 Zeroclipboard를 기반으로 한 개선 사항이며, 짧은 Zclip이라고합니다. jQuery의 API로서 JQuery Zeroclipboard도 매우 간단한 작업을 수행합니다. 공식 주소는 다음과 같습니다. http://www.steamdev.com/zclip/
사용하기 전에 2 개의 JS 파일을 참조해야합니다 : jquery.js 및 jquery.zclip.js
<script type = "text/javaScript"src = "js/jquery.js"> </script> <script type = "text/javaScript"src = "js/jquery.zclip.js"> </script>
이제 우리는 jQuery.zclip.js를 사용하여 다음과 같이 클립 보드 데모로 사본을 구현합니다.
<! docType html> <html> <head> <title> Zeroclipboard test </title> <meta charset = "utf-8"> <style type = "text/css">. line {margin-bottom : 20px;}/* 카피 프롬프트*/. 복사 : 999; 50%; 50%; -20px -80px; 배경색 : rgba (0, 0, 0, 0.2); 필터 : progid : progid : dximagetransform.microsoft.gradient (startColorstr =#30000000, endcolorstr =#30000000); 패딩 : 6px;}. Padding : 10px 20px; #f4d9a6; 배경 색 : #fffdee; font-size : 14px;} </style> <script type = "text/javaScript"src = "jquery.js"> </script> <script type = "text/javascript"src = "jquery.zclip.js"> </head> </head> </head> </head> 현재 텍스트를 복사 </h2> <a href = "#none"> copy me cover me </a> </div> <div> <h2> demo2를 클릭하여 텍스트를 양식으로 복사하려면 클릭하십시오 </h2> <a href = "#none"> 복사 순서에서 텍스트를 복사하려면 클릭하십시오. 유형 = "text/javaScript"> $ (document) .ready (function () {/* 모든 클래스를 복사 태그로 정의하고 클릭 한 후 클릭 한 객체*/$ ( ". copy")의 텍스트를 복사 할 수 있습니다. 마우스*/$ (this) .css ( "색상", "오렌지");}, aftercopy : function () {/*성공적인 복사 후 작동*/var $ copysuc = $ ( "<div class = 'copy-tips'> <div class = 'Copy-Tips-Wrap'> ☺ copy 성공적으로 </div> </div> "); $ ("body "). find (". copy-tips "). remove (). end (). Append ($ Copysuc); $ (". copy-tips "). fadeout (3000);}});/* 클래스를 클릭 한 후 텍스트를 복사 할 수 있습니다. "zeroclipboard.swf", copy : function () {return $ (this) .parent (). find ( ". input"). val ();}, aftercopy : function () {/* 복사 후*/var $ copysuc = $ ( "<div class = 'copy-tips'> <div class = 'copy-tips-wrap'> c Copy 성공적으로 </div> </div> "); $ ("body "). find (". copy-tips "). remove (). end (). Append ($ Copysuc); $ (". Copy-Tips "). fadeout (3000);}}); </script>데모 다운로드 (따뜻한 알림 : 코드를 다운로드하는 학생, 데모를 탐색 할 때 서버 환경을 사용해야합니다. 그렇지 않으면 효과가 없습니다 ~)
위의 코드는 jQuery의 작동 노드의 함수를 결합하고 복사 전후와 같은 jQuery.zclip.js의 역할을 수행합니다. 또한 jquery.zclip.js의 힘은 사용하기가 매우 간단하다는 것을 알 수 있습니다. jquery.zclip.js의 함수에 대해 더 알아야 할 경우 http://www.steamdev.com/zclip/로 이동하십시오.
위의 독립적 인 JS 라이브러리에서 zeroclipboard.js 및 jquery.zclip.js는 플래시를 사용하여 클립 보드에 복사하는 기능을 구현합니다. Zeroclipboard.js를 사용하면 기능이 상대적으로 적은 기능을 제공하지만 비교적 작은 파일이있는 독립 라이브러리입니다. jQuery.zclip.js를 사용한 후 기능은 비교적 풍부합니다. 그러나 jQuery 프레임 워크를 사용하지 않는 사이트의 경우 jQuery.zclip.js를 사용하는 것은 광대역 낭비입니다. 사용해야 할 복사 방법은 제품의 특정 위치에 따라 다릅니다 ~
위의 내용은 귀하에게 소개 된 편집기가 모든 브라우저 (권장)와 호환되는 클립 보드 기능에 컨텐츠를 복사하는 JS 구현입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!