jQuery 플러그인 Zclip은 모든 브라우저와의 완벽한 호환성을 구현하고 클릭하여 콘텐츠를 클립보드에 복사합니다_jquery

웹 개발에서는 사용자가 마우스를 드래그한 후 마우스 오른쪽 버튼을 클릭하여 복사할 때 발생할 수 있는 오류를 방지하기 위해 페이지의 코드 조각, URL 주소 및 기타 정보를 사용자에게 직접 복사할 수 있습니다. 페이지에 복사 버튼이 있습니다. 이 복사 버튼을 클릭하면 내용이 복사되고 사용자는 붙여넣고 싶은 곳에 붙여넣을 수 있습니다.

HTML

먼저 jquery 라이브러리와 zclip 플러그인을 페이지에 로드해야 합니다. 이 두 파일은 클릭하여 다운로드할 수 있습니다.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.zclip.min.js"></script> 

그런 다음 페이지 본문 부분에 다음 코드를 추가합니다.

<textarea id="mytext">请输入内容</textarea><br/> 
<a href="#" id="copy_input" class="copy">复制内容</a>

입력 상자 텍스트 영역은 물론 다른 HTML 요소일 수도 있고 링크 텍스트 형식일 수도 있는 복사 버튼이 있을 수도 있습니다.

자바스크립트

'콘텐츠 복사'를 클릭하면 zclip 플러그인이 호출되어 복사에 성공합니다.
코드를 확인하세요.

$(function(){ 
  $('#copy_input').zclip({ 
    path: 'js/ZeroClipboard.swf', 
    copy: function(){//复制内容 
      return $('#mytext').val(); 
    }, 
    afterCopy: function(){//复制成功 
      $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功'); 
    } 
  }); 
}); 

복사된 콘텐츠가 입력 상자 입력, 텍스트 영역 등에서 오는 경우 복사 개체를 사용하세요.

copy: function(){ 
  return $('#mytext').val(); 
} 

복사된 콘텐츠가 페이지 요소 div, p 등에서 나온 경우 복사 개체를 사용하세요.
복사: $('#mytext').text()
이것으로 콘텐츠를 클립보드에 복사하는 기능이 완료되었습니다.
매개변수 설명
경로: swf 호출 경로, 필수(예: js/ZeroClipboard.swf), ZeroClipboard.swf 파일은 이미 다운로드 패키지에 있습니다.
copy: 복사된 콘텐츠는 임의의 문자열이거나 콜백 함수에서 반환된 콘텐츠일 수 있습니다.
beforeCopy: 콘텐츠 복사 전 콜백 함수, 선택 사항
afterCopy: 콘텐츠 복사 후 콜백 함수, 선택 사항

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.