JS를 사용하여 대지 복사 기능을 구현하는 방법
- 亚连원래의
- 2018-06-07 14:33:212225검색
이 기사에서는 페이스트보드 기능을 구현하기 위해 JS 코드 20줄을 분석합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구가 참고할 수 있습니다.
클립보드 사용은 기본 기술입니다. 코더로서 모든 사람은 Tab, Ctrl/Cmd + A, Ctrl/Cmd + C 및 Ctrl/Cmd + V가 각각 자동 초점, 복사 및 붙여넣기를 위한 단축키라는 것을 알아야 합니다.
하지만 일반 사용자에게는 쉽지 않을 수도 있습니다. 사용자가 클립보드가 무엇인지 알고 있더라도 시력이 매우 좋거나 반사 신경이 빠른 사용자를 제외하고는 원하는 텍스트를 정확하게 강조 표시하기가 어려울 것입니다. 사용자가 키보드 단축키를 모르거나 숨겨진 편집 메뉴를 볼 수 없거나 마우스 오른쪽 버튼 클릭 메뉴를 사용한 적이 없거나 터치 스크린을 길게 누르면 옵션 메뉴가 나타나는 것을 모르는 경우에는 아마도 복사 기능을 인식하지 못할 것입니다.
그렇다면 사용자를 돕기 위해 "클립보드에 복사" 버튼을 제공해야 할까요? 이 기능은 키보드 단축키에 매우 익숙한 사용자에게도 유용합니다.
클립보드 보안에 대하여
몇 년 전만 해도 브라우저에서 클립보드를 직접 사용하는 것이 불가능했습니다. 개발자는 Flash를 통해 이를 구현해야 했습니다.
클립보드가 하찮아 보일 수도 있지만 브라우저가 마음대로 콘텐츠를 보고 조작할 수 있다면 어떤 일이 일어날지 상상해 보세요. JS 스크립트(타사 스크립트 포함)는 클립보드의 텍스트 정보를 보고 암호, 중요한 정보 또는 전체 문서를 원격 서버로 보낼 수 있습니다.
현재 클립보드는 기본 기능이 제한되어 있으며 다음과 같은 제한 사항이 있습니다.
Safari를 제외한 대부분의 브라우저는 클립보드를 지원합니다.
지원은 브라우저에 따라 다르며 일부 기능은 불완전하거나 버그가 있습니다.
마우스 클릭이나 키보드 누르기와 같은 이벤트는 사용자에 의해 시작되어야 합니다. 스크립트는 클립보드에 자유롭게 접근할 수 없습니다.
document.execCommand()document.execCommand（）
此方法就是实现剪贴板的关键，它可以传入 cut , copy , paste 三种参数。从最常用的 document.execCommand（'copy'） 开始介绍。
在使用之前，我们应该检查浏览器是否支持 copy 命令: document.queryCommandSupported('copy'); 或 document.queryCommandEnabled('copy'); ，这两个方法效果相同。
但在Chrome下，尽管Chrome确实支持使用 copy 命名,但两个方法都返回 false 。所以最好是将检查代码包在一个 try-catch 代码块中。
下一步，我们应该允许用户复制什么呢？必须突出显示文本，所有浏览器都可用 select() 方法选择文本input和textarea内的文本。同时Firefox和Chrome / Opera也支持 document.createRange 方法，该方法允许从任何元素中选择文本，如下：
// select text in #myelement node var myelement = document.getElementById('#myelement'), range = document.createRange(); range.selectNode(myelement); window.getSelection().addRange(range);
但IE / Edge不支持。
clipboard.js
若你不想自己实现一个较为健壮的跨浏览器剪贴板方法的话， clipboard.js 可以帮你。它有好几种设置选项的方式，如H5的data属性，设置绑定触发元素以及目标元素，如：
<input id="copyme" value="text in this field will be copied" /> <button data-clipboard-target="#copyme">copy</button>
自己动手实现
clipboard.js大小仅2Kb，若仅实现如下的部分功能的话，那么可以在20行的代码内实现：
仅部分表单元素可被复制
若在不支持的浏览器中（没错，就是指Safari），可突出显示选中文本，并提示用户按 Ctrl / Cmd + C 。
像clipboard.js一样，先创建一个button用于触发方法，它具有一个data属性 data-copytarget ，指向要copy的元素(即 #website )
<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
一个立即执行函数表达式绑定click事件的函数，该函数用于解析 data-copytarget 属性内容，选择对应字段的文本并执行 document.execCommand('copy') ,。若失败，文本保持选中状态，显示提示框：
(function() {
'use strict';
// click events
document.body.addEventListener('click', copy, true);
// event handler
function copy(e) {
// find target element
var
t = e.target,
c = t.dataset.copytarget,
inp = (c ? document.querySelector(c) : null);
// is element selectable?
if (inp && inp.select) {
// select text
inp.select();
try {
// copy text
document.execCommand('copy');
inp.blur();
}
catch (err) {
alert('please press Ctrl/Cmd+C to copy');
}
}
}
})();示例
虽然在上例中，算上样式和动画的代码，代码已经超过20行了，但动画和样式是可选的。
总结：
通过 .select() 选择要复制的表单元素的内容
调用 document.execCommand("copy") 方法
调用 .blur() 方法，从表单元素中移除焦点
将第2、3步包在 try catch 块中，在不支持的浏览器下则提示
其他方式
有很多新颖的剪贴板应用方式。例如 Trello.com ,将鼠标悬停在卡片上时，可以按 Ctrl / Cmd + C
document.execCommand('copy')부터 시작해 보겠습니다. 사용하기 전에 브라우저가 복사 명령을 지원하는지 확인해야 합니다: document.queryCommandSupported('copy') 또는 document.queryCommandEnabled('copy'); 두 방법 모두 동일한 효과를 갖습니다. <p></p>그러나 Chrome에서는 Chrome이 사본 이름 지정 사용을 지원하지만 두 방법 모두 false를 반환합니다. 따라서 검사 코드를 try-catch 블록으로 래핑하는 것이 좋습니다. <p><a href="http://www.php.cn/js-tutorial-401130.html" target="_blank">다음 단계로 사용자가 무엇을 복사할 수 있도록 허용해야 할까요? 텍스트는 강조 표시되어야 하며 모든 브라우저는 select() 메서드를 사용하여 텍스트 입력 및 텍스트 영역 내에서 텍스트를 선택할 수 있습니다. 동시에 Firefox 및 Chrome/Opera는 다음과 같이 모든 요소에서 텍스트를 선택할 수 있는 <code>document.createRange 메서드도 지원합니다. rrreee 그러나 IE/Edge는 이를 지원하지 않습니다.
🎜 직접 구현하세요🎜🎜🎜clipboard.js 크기는 다음 부분만 구현하는 경우 2Kb에 불과합니다. 기능은 20줄의 코드로 구현할 수 있습니다. 🎜🎜🎜일부 양식 요소만 복사할 수 있습니다. 🎜🎜🎜지원되지 않는 브라우저(예, Safari를 의미합니다)에서는 선택한 텍스트를 강조 표시하고 사용자에게 누르라는 메시지를 표시합니다. Ctrl/Cmd + C. 🎜🎜clipboard.js와 마찬가지로 먼저 메서드를 트리거하는 버튼을 만듭니다. 여기에는 복사할 요소(예: #website)를 가리키는 데이터 속성 data-copytarget이 있습니다.🎜rrreee🎜예🎜🎜위의 예에서는 count 스타일과 애니메이션에 대한 코드는 이미 20줄이 넘었지만 애니메이션과 스타일은 선택사항입니다. 🎜🎜요약: 🎜🎜🎜🎜복사할 양식 요소의 내용을 .select()를 통해 선택합니다. 🎜🎜🎜🎜document.execCommand("copy") 메서드를 호출합니다. 🎜🎜🎜🎜다음에서 .blur() 메서드를 호출합니다. 양식 요소 포커스 제거🎜🎜🎜🎜try catch 블록에서 2단계와 3단계를 래핑합니다. 브라우저가 이를 지원하지 않으면 메시지가 표시됩니다🎜🎜🎜🎜🎜다른 방법🎜🎜🎜많은 새로운 클립보드 적용 방법이 있습니다. 예를 들어 Trello.com의 경우 카드 위로 마우스를 가져가면 Ctrl / Cmd + C 를 누르고 카드의 링크 주소를 클립보드에 복사할 수 있습니다. 그 뒤에 있는 구현은 먼저 URL이 포함된 숨겨진 양식 요소를 만든 다음 해당 콘텐츠를 선택하고 복사하는 것입니다. 매우 영리하고 유용합니다. 이 기능에 대해 아는 사용자는 거의 없을 것 같습니다! 🎜🎜위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜JS를 사용하여 반복 Nodelist Dom 목록을 구현하는 방법🎜🎜🎜🎜Vue에서 클릭 후 텍스트 색상 변경을 구현하는 방법🎜🎜🎜🎜Vue-cli에서 별도의 페이지에 대한 배경색 설정을 구현하는 방법🎜 🎜위 내용은 JS를 사용하여 대지 복사 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!