원생 Js 복사 기능 을 실현 하 는 방법 요약, execCommand 와 clipboardData 의 사용

1706 단어 JS상용 지식
원생 Js 가 복사 (Copy) 를 실현 하 는 두 가지 방법 중 하 나 는 클립 보드 데 이 터 를 이용 하 는 것 이 고, 다른 하 나 는 execCommand () 를 이용 하여 오늘 그들 에 대한 사용 방법 을 통일 적 으로 설명 할 것 이다.
 
document.execCommand
HTML 문서 가 디자인 모드 (designMode) 로 전 환 될 때 문서 대상 은 execCommand 방법 을 노출 합 니 다. 이 방법 은 편집 가능 한 영역의 내용 을 조작 하기 위해 명령 을 실행 할 수 있 습 니 다.대부분의 명령 은 문서 의 선택 (굵 은 몸, 기울 임 꼴 등) 에 영향 을 주 고 다른 명령 은 새 요 소 를 삽입 하거나 줄 전체 (들 여 쓰기) 에 영향 을 줍 니 다.contentEditable 을 사용 할 때 execCommand () 를 호출 하면 현재 활동 의 편집 가능 한 요소 에 영향 을 줍 니 다.
호환성:
특징.
Chrome
Edge
Firefox (Gecko)
Internet Explorer
Opera
Safari
복사 본
43
(Yes)  
441
9
29
10
  
clipboardData
clipboardData 대상, 웹 페이지 의 클립보드 에 텍스트 형식 만 설정 할 수 있 습 니 다. 즉, 텍스트 clearData ("Text") 만 복사 할 수 있 습 니 다. 붙 여 넣 기 판 getData ("Text") 에서 붙 여 넣 기 판 의 값 을 읽 을 수 있 습 니 다. setData ("Text", val) 에서 붙 여 넣 기 판 의 값 을 복사 할 때 body 의 oncopy 이벤트 가 실 행 됩 니 다. 직접 return false 는 복사 가 금지 되 어 있 습 니 다. 웹 페이지 의 텍스트 를 복사 할 수 없 음 을 주의 하 십시오.
(메모: 주로 IE, ie7, ie8 과 웹 페이지 를 복사 할 수 있 는 권한 이 있 습 니 다. "보안" 의 "사용자 정의 단계" 스 크 립 트 에 설정 해 야 합 니 다)
 
코드 구현
html:
    

JS:
copyToClipBoard:function(s,id){ //      
	if(document.execCommand){
		var e=document.getElementById(id);
		e.select();
		document.execCommand("Copy");
		return true;
	}
	if(window.clipboardData){
        window.clipboardData.setData("Text", s);
        return true;
    }
	return false;
},

 
끝 ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

좋은 웹페이지 즐겨찾기