클립보드 예제 코드 공유에 붙여넣기 JS 구현
- 小云云원래의
- 2018-03-13 16:26:551204검색
이 글에서는 주로 클립보드에 붙여넣기 위한 JS 예제 코드를 공유합니다. 현재 클립보드에 붙여넣는 방법에는 두 가지가 있습니다.
타사 라이브러리 클립보드
기본 JS, 주로 document.execCommand 메서드
첫 번째 방법은 문서 지침에 따라 트리거 요소의 data-clipboard-text 또는 data-clipboard-target을 설정하는 것입니다. 자세한 내용은 Document
두 번째 방법:
document.execCommand
이 방법의 호환성은 실제로 그다지 좋지 않습니다. 특히 모바일 단말기의 경우 자세한 내용은 여기에 있지만 일부 모델에서는 클립보드에도 문제가 있습니다. 따라서 구체적인 용도는 여전히 상황에 따라 다릅니다. 이 방법을 사용하기 전에 먼저 브라우저가 bool = document.execCommand('copy')를 지원하는지 확인해야 합니다.
MDN은 위 방법을 다음과 같이 설명합니다.
HTML 문서의 경우 디자인 모드 designMode로 전환하면 문서 개체는 execCommand 메서드를 노출합니다. 이 메서드를 사용하면 명령을 실행하여 편집 가능한 영역의 내용을 조작할 수 있습니다.
굵은 부분인 디자인 모드에 주목하세요. 즉, 사용하기 전에 문서 모드를 디자인 모드로 전환해야 합니다
document.designMode = 'on'
실행 명령을 완료한 후 값을 off로 설정하세요
굵은 부분도 있고, 편집 가능 영역, 기본 입력 및 텍스트 영역 요소는 편집 가능합니다(요소의 contenteditable="true"로 설정하면 요소의 편집 모드가 활성화될 수도 있습니다)
먼저 양식 요소를 구현하는 방법을 살펴보겠습니다
ele.addEventListener('click', () => { document.designMode = 'on'
let bool = document.execCommand('copy') if (!bool) {
alert('sorry, 手动复制吧')
} else { let val = 'something'
let inputEle = document.createElement('input') document.body.appendChild(inputEle)
inputEle.setAttribute('value', val)
inputEle.setAttribute('readonly', 'readonly')
inputEle.select() document.execCommand('copy') document.body.removeChild(inputEle)
alert('copied')
} document.designMode = 'off'})커서를 피하기 위해 또는 입력 방법을 가져오려면 요소에 읽기 전용을 설정해야 합니다.
inputEle.select() 메서드는 때때로 일부 브라우저에서 모든 콘텐츠를 선택할 수 없습니다. 이 경우 inputElement의 setSelectionRange 메서드를 사용해야 합니다.
HTMLInputElement.setSelectionRange 메소드는 집중된
요소에서 특정 범위의 콘텐츠를 선택할 수 있습니다.
요약하자면 다음 두 줄을 추가하세요.
...inputEle.focus() inputEle.setSelectionRange(0, inputEle.value.length) document.execCommand('copy')...
입력과 같은 양식 요소가 아니고 select 및 setSelectRange를 사용할 수 없는 경우 getSelection 및 createRange 메서드를 사용하여 이 프로세스를 시뮬레이션할 수 있습니다. Selection 개체는 텍스트 범위를 나타냅니다. 또는 사용자가 선택한 커서는 다음과 같이 execComman 명령의 실행을 만족시키는 편집 가능한 활동 영역입니다. .com
자세한 기사: https://github.com/axuebin /articles/issues/26
현재 클립보드에 붙여넣기를 구현하는 두 가지 일반적인 방법이 있습니다.
Native JS, 주로 문서 .execCommand 방법
첫 번째 방법은 문서 지침에 따라 트리거를 설정하는 것입니다. 요소의 data-clipboard-text 또는 data-clipboard-target으로 충분합니다. 자세한 내용은 문서를 참조하세요. 두 번째 방법:document.execCommand
이 방법의 호환성은 사실 별로 좋지 않습니다. 특히 모바일 끝, 자세한 내용은 여기에 있지만 클립보드도 일부 모델에서는 문제가 있으므로 구체적인 용도는 상황에 따라 다릅니다. 이 방법을 사용하려면 먼저 브라우저가 bool = document.execCommand('copy')를 지원하는지 확인해야 합니다
MDN은 위 방법에 대해 다음과 같이 설명합니다.
let range = document.createRange()let tar = document.querySelector('#code') range.selectNodeContents(tar)let selection = window.getSelection() selection.removeAllRanges() selection.addRange(range)document.execCommand('copy') selection.removeAllRanges()실행 명령을 완료한 후 값을 off로 설정하세요
굵은 부분도 있고, 편집 가능 영역, 기본 입력 및 텍스트 영역 요소는 편집 가능합니다(요소의 contenteditable="true"로 설정하면 요소의 편집 모드가 활성화될 수도 있습니다)
먼저 양식 요소를 구현하는 방법을 살펴보겠습니다
document.designMode = 'on'
커서를 피하기 위해 또는 입력 방법을 가져오려면 요소에 읽기 전용을 설정해야 합니다.
요소에서 특정 범위의 콘텐츠를 선택할 수 있습니다.
요약하자면 다음 두 줄을 추가하세요.
ele.addEventListener('click', () => { document.designMode = 'on'
let bool = document.execCommand('copy') if (!bool) {
alert('sorry, 手动复制吧')
} else { let val = 'something'
let inputEle = document.createElement('input') document.body.appendChild(inputEle)
inputEle.setAttribute('value', val)
inputEle.setAttribute('readonly', 'readonly')
inputEle.select() document.execCommand('copy') document.body.removeChild(inputEle)
alert('copied')
} document.designMode = 'off'})입력과 같은 양식 요소가 아니고 select 및 setSelectRange를 사용할 수 없는 경우 getSelection 및 createRange 메서드를 사용하여 이 프로세스를 시뮬레이션할 수 있습니다. Selection 개체는 텍스트 범위를 나타냅니다. 또는 사용자가 선택한 커서. execComman 명령 실행에 맞는 편집 가능한 활동 영역은 다음과 같습니다
...inputEle.focus() inputEle.setSelectionRange(0, inputEle.value.length) document.execCommand('copy')...위는 비입력, 텍스트 영역 및 기타 양식 요소에도 구현 가능합니다
관련 권장 사항:
JavaScript 클립보드 구현 코드에 내용 복사위 내용은 클립보드 예제 코드 공유에 붙여넣기 JS 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!