js 원 키 복사 기능 구현

프로젝트 설명:최근 에 모 바 일 이벤트 페이지 를 만 들 었 습 니 다.사용자 가 추첨 한 후에 교환 코드 를 생 성 합 니 다.사용자 체험 을 최적화 하기 위해 서 는 복사 단 추 를 만들어 야 합 니 다.교환 코드 를 원 클릭 으로 복사 할 수 있 습 니 다.
프로젝트 수요:모 바 일 엔 드 의 모든 주류 브 라 우 저 를 호 환 합 니 다.그리고 안 드 로 이 드 와 IOS 의 H5 페이지 로
현재 복제 기능 을 실현 할 수 있 는 방법 은 다음 과 같은 몇 가지 가 있다.

execCommand("copy");

clipboardData;

ZeroClipboard.js

1.execcommand:doucment 대상 의 방법 으로 브 라 우 저 메뉴 의 많은 기능 을 실현 할 수 있 습 니 다.예 를 들 어 파일 저장,새 파일 열기,취소,복사 등 입 니 다.텍스트 편집 을 더 잘 할 수 있 습 니 다.
다음 과 같은 용법 이 있다.
[전 선]
형식:document.execCommand("SelectAll");
[열기]
형식:document.execCommand("열기");
[다른 이름 으로 저장]
형식:document.execCommand("SaveAs");
【인쇄】
형식:document.execCommand("print");
[잘라 내기]
형식:document.execCommand("Cut","false",null);
【삭제】
형식:document.execCommand("Delete","false",null);
[텍스트 글꼴 변경]
형식:document.execCommand("FontName","false",sFontName);
[글꼴 크기 변경]
형식:document.execCommand("FontSize","false",sSize|iSize);
[절대 포 지 셔 닝 요 소 를 드래그 할 수 있 습 니 다]
형식:document.execCommand("2D-position","false","true");
【복사】
형식:document.execCommand("Copy","false",null);
등등
인 스 턴 스 적용:
HTML：<input onclick="copy()" value=" . copy !">js 코드:

function copy(){
 var Url2=document.getElementById("js-copy-text");
 Url2.select(); //     
 try{
  if(document.execCommand('copy', false, null)){
   document.execCommand("Copy");
   alert("    ，   。");
  } else{
   alert("    ，     ");
  }
  } catch(err){
   alert("    ，     ");
  }
}

메모:테스트 를 통 해 PC 쪽 IE 는 수 동 으로 권한 을 설정 해 야 합 니 다.다른 브 라 우 저 는 모두 지원 하고 M 쪽 은 브 라 우 저 지원 이 적 습 니 다.
2.clipboardData:대상 이 클립보드 에 대한 접근 을 제공 합 니 다.
clipboardData 는 세 가지 방법 이 있 습 니 다.

clearData(sDataFormat)클립보드 에서 지정 한 형식의 데 이 터 를 삭제 합 니 다.

clearData(sDataFormat)getData(sDataFormat)는 클립보드 에서 형식 을 정 한 데 이 터 를 가 져 옵 니 다.

clearData(sDataFormat)setData(sDataFormat,sData)는 클립보드 에 지정 한 형식의 데 이 터 를 부여 하고 true 를 되 돌려 작업 이 성공 했다 는 것 을 나타 낸다.

인 스 턴 스 적용:<input onclick="copy(this)" value=" . copy !">js 코드:

function copy(){
 window.clipboardData.setData("text",document.getElementById("mytext").value);
 alert("The text is on the clipboard, try to paste it!");
}　　

메모:테스트 를 통 해 이 방법 은 IE 브 라 우 저 에서 만 유효 합 니 다.
다른 브 라 우 저 에서 실행 하면 오류 가 발생 합 니 다:
firefox：TypeError: window.clipboardData is undefined
chrom: TypeError: Cannot read property 'setData' of undefined
조사 자료:
MSDN https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
This object is available in script as of Microsoft Internet Explorer 5.
http://help.dottoro.com/ljctuhrg.php또한 이 방법 은 안전성 을 고려 하여 현재 IE 만 지원 한다 고 밝 혔 다.
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!