JAVASCRIPT 클립보드 로 복사
4238 단어 JavaScriptFlash클립보드
최근 에 장 선생 이 42qu 대신 짧 은 주소 서 비 스 를 쓰 겠 다 고 약 속 했 는데 쓰 는 과정 에서 몇 가지 새로운 것 을 배 웠 습 니 다. JS 조작 클립보드 가 바로 그 중의 한 예 입 니 다.
Javascript 자 체 는 당연히 클립보드 조작 인 터 페 이 스 를 제공 합 니 다. 일반적으로 닮 았 습 니 다.
function copyToClipboard(text)
{
if (window.clipboardData) // IE
{
window.clipboardData.setData("Text", text);
}
else
{
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}그러나 안전 이라는 단어 에 대한 인식 에 차이 가 있 기 때문에 기 존 인 터 페 이 스 를 사용 하려 면 용기 가 필요 하 다. 깡통 이 깨 지 는 용기 가 필요 하 다.
그래서 저 는 StackOverFlow 의 토론 을 살 펴 보 았 습 니 다. 그 중에서 언급 한 플래시 hack 사용 은 현재 가장 완벽 한 해결 방안 처럼 보 였 습 니 다. 그래서 저 는 제로 클립 보드 탐험 을 시 작 했 습 니 다.페이지 에서 ajax 제출 form 을 사용 하여 jQuery 라 이브 러 리 를 사용 하여 몇 가지 문 제 를 일 으 켰 기 때문에 다시 찾 아 보 았 습 니 다. 나중에 사용 한 해결 방안 인 zClip 을 발 견 했 습 니 다.
zClip 은 zeroClipboard 와 jQuery 를 결합 하여 나의 수 요 를 만족 시 켰 다. 간결 한 인터페이스 디자인 으로 인해 대부분의 사람들의 수 요 를 만족 시 켜 야 한다.물론 플래시 의존 으로 인 한 선천성 결함 이 있 으 니 조심 하 세 요.
다음은 제 가 홈 페이지 사용 설명 을 붙 여 드 리 겠 습 니 다.
1. 페이지 에 jQuery 와 zClip 추가:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>2. zClip 과 복사 할 단추 (또는 다른 요소) 를 연결 합 니 다:
$(document).ready(function(){
$('a#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
});3. 기본 복사 가 완료 되면 alert 를 팝 업 합 니 다. beforeCopy 와 after Copy 두 개의 반전 함 수 를 설정 하여 사용자 정의 할 수 있 습 니 다.
$(document).ready(function(){
$("a#copy-callbacks").zclip({
path:'js/ZeroClipboard.swf',
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#callback-paragraph').css('background','yellow');
$(this).css('color','orange');
},
afterCopy:function(){
$('#callback-paragraph').css('background','green');
$(this).css('color','purple');
$(this).next('.check').show();
}
});
});4. 맞 춤 형 매개 변수:
사용 주의사항:
/* zClip is a flash overlay, so it must provide */
/* the target element with "hover" and "active" classes */
/* to simulate native :hover and :active states. */
/* Be sure to write your CSS as follows for best results: */
a:hover, a.hover {...}
a:active, a.active {...}
$('a.copy').zclip('show'); // enable zClip on the selected element
$('a.copy').zclip('hide'); // hide zClip on the selected element
$('a.copy').zclip('remove'); // remove zClip from the selected element
기타 참고 가능 한 해결 방안:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
