이 기능은 인터넷 서핑을 하다 보면 누구나 자주 접하게 된다고 생각합니다. 프로젝트에 필요할 때까지는 이 기능을 어떻게 구현해야 할지 크게 신경 쓰지 않았습니다.
최종 효과:
인터넷에서 많이 검색해 보면 단순히 js 방식을 사용하는 것이 불가능하지는 않지만, 브라우저마다 보안 메커니즘이 다르기 때문에 크로스 브라우저가 되지는 않습니다. 자주 사용하는 여러 웹사이트를 확인해 보니 모두 "클립보드에 복사" 버튼을 가리기 위해 투명 플래시를 사용하고 있습니다. 그래서 "클립보드에 복사"를 클릭하면 실제로는 플래시를 클릭한 다음 복사해야 할 내용을 복사하게 됩니다. .플래시로 전달된 후, 플래쉬의 복사 기능을 통해 들어오는 내용을 클립보드에 복사합니다.
JQuery 라이브러리 및 zclip 플러그인 로드
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.zclip.min.js"></script>
다음은 주로 텍스트 상자의 링크를 클립보드에 복사하는 작은 데모입니다.
HTML
<input type="text" value="www.jb51.net" id="link"> <span id="copyBtn">复制链接</span>
그런 다음 스크립트
를 추가하세요.
<script> $('#copyBtn').zclip({ path: "ZeroClipboard.swf", copy: function(){ return $('#link').val(); } }); </script>
그런 다음 웹페이지를 직접 열어 테스트할 수 있습니다. 이것은 단지 간단한 작은 애플리케이션일 뿐이므로 모두가 빨리 익힐 수 있기를 바랍니다.