H5 복사 작업 예제 코드

처음에는 웹에서 클립보드로 접근할 수 있는 콘텐츠가 없었습니다. 과거에는 복사/붙여넣기/잘라내기를 수행하려는 경우에만 플래시를 사용할 수 있었습니다. 그러나 이제 훌륭한 H5 또는 W3C는 H5 제어 클립보드에 대한 초안을 출시했습니다. 가장 유명한 것은

document.execCommand()
ClipboardEvent

두 가지 API입니다. 단계별로 살펴보겠습니다. 먼저 고전적인 execCommand의 사용법을 살펴보겠습니다.

복사 작업

복사 입력

먼저 기본 복사 과정을 이해해야 합니다.

복사( command + c || ctrl + c)

execCommand도 이 프로세스를 따라 이 효과를 얻습니다. execCommand를 사용하여 복사를 실행하려면 먼저 복사하려는 요소를 선택해야 합니다.
여기서 새로운 API인 window.getSelection()도 사용됩니다. 구체적으로:

getSelection(): 현재 선택된 요소의 콘텐츠를 가져오는 데 사용됩니다. 일반적으로 마우스를 사용하여 페이지의 콘텐츠를 선택합니다.

toString(): 선택한 내용을 텍스트로 직접 변경하는 데 사용됩니다.

기본 사용법은 다음과 같습니다.

// 선택한 텍스트 출력

window.getSelection().toString();

일반적으로 이 API는 보조 기능에만 사용됩니다. 가장 일반적인 접근 방식은 입력 요소를 동적으로 생성한 다음 입력[값]을 동적으로 지정하는 것입니다. select()를 실행하고 선택 후 복사를 실행합니다.

# 전체 코드는

function copyContent(elementId) {
  // 动态创建 input 元素
  var aux = document.createElement("input");
  // 获得需要复制的内容
  aux.
set
Attribute("value", document.getElementById(elementId).innerHTML);
  // 添加到 DOM 元素中
  document.body.app
end
Child(aux);
  // 执行选中
  // 注意: 只有 input 和 textarea 可以执行 select() 方法.
  aux.select();
  
  // 获得选中的内容
    var content = window.getSelection().toString();
    
  // 执行复制命令
  document.execCommand("copy");
  // 将 input 元素移除
  document.body.removeChild(aux);
}

예제 보기

원하는 대로 복사

물론 그렇지 않다면 입력 요소를 동적으로 추가하고 싶다면 지정된 DOM 요소를 직접 복사하면 어떻게 해야 할까요? 여기서는 HTML5에서 새롭게 제공하는 createRange() 관련 메소드를 사용해야 합니다. 물론 위의 getSelection()도 그 중 하나입니다. 사용되는 API는 다음과 같습니다.

document.createRange(): 선택한 컨테이너를 만드는 데 사용됩니다. 객체 범위를 반환합니다. 이 API의 호환성도 매우 좋으며 휴대폰과 PC 모두에서 지원됩니다.

selectNode(DOM): Object 범위에 탑재된 메서드를 반환합니다. 선택한 요소를 추가하는 데 사용됩니다.

window.getSelection()

addRange(range) 하나만 추가할 수 있습니다. 이 메소드는 getSelection() 메소드 아래에 마운트되며 요소 선택을 수행하는 데 사용됩니다. (! 매우 중요)

위 API는 이게 전부입니다.

데모만 시청하세요

여기서 키 코드를 게시하겠습니다:

  var copyDOM = document.querySelector('#selector');  
  var range = document.createRange();  
  // 选中需要复制的节点
  range.selectNode(copyDOM);
  // 执行选中元素
  window.getSelection().addRange(range);
  // 执行 copy 操作
var successful = document.execCommand('copy');  
  try {  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('copy is' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }
// 移除选中的元素
  window.getSelection().remove
All
Ranges();

여기에 필요합니다. 추가로 다시 말씀드리지만, 위의 복사 작업은 자동으로 수행할 수 없습니다. 즉, 사용자 상호작용 없이는 복사와 같은 대화형 동작을 수행할 수 없습니다. 따라서 여기서는 클릭이벤트를 사용해야 합니다(물론 다른 이벤트를 대신 사용할 수도 있습니다).

클립보드를 사용하여 복사

우선 클립보드가 최근에 제안되었기 때문에 호환성은 아직 검증 시간을 기다려야 합니다. 현재 호환성은 몇 가지 간단한 이벤트를 지원하는 수준입니다.
브라우저가 ClipboardEvent 생성자를 지원하는 경우. 그러면 복사 작업이 매우 간단해집니다.

// 물론 상호작용의 클릭 이벤트에는 다음 코드가 배치되어야 합니다.

var copyEvent = 
new
 ClipboardEvent('copy', {
            dataType: 'text/plain',
            data: 'My string'
        });
        document.dispatchEvent(copyEvent);

그렇지 않은 경우에는 문서의 복사 이벤트에서 반환된 event.clipboardData API를 통해서만 관련 정보를 설정하거나 가져올 수 있습니다. 이벤트 콜백을 통해서만 clipsboardData 객체 를 얻을 수 있습니다:

e.clipboardData:

document.addEvent
List
ener('copy', function(e){
    // 设置信息，实现复制
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.
prev
entDefault(); 
});

clipboardData는 문서의 복사/붙여넣기/잘라내기 이벤트를 통해서만 얻을 수 있습니다. 이 obj 또한 일반적으로 사용되는 두 가지 API

형식인 기본 MIME 유형을 마운트합니다. 가장 일반적으로 사용되는 것은 text/plain입니다. 구체적인 내용은 MIME 참조를 참고하세요.

data: MIME 타입에 대응하여 넣은 특정 데이터 내용입니다.

setData(format, data): 관련 데이터 정보를 설정하며 주로 사용됩니다. 카피앤컷 관련 이벤트를 위해

getData(format): 일반적으로 붙여넣기 이벤트에 사용됩니다. 클립보드의 내용을 가져오는 데 사용됩니다. 그러나 올바른 디코딩 형식을 개발해야 합니다(즉, 올바른 MIME 유형이 설정됨). 또한 이 방법은 붙여넣기 이벤트에서만 사용할 수 있습니다.

위 내용은 API에 대한 간략한 소개인 것 같고, 그다음에 본격적으로 실용적인 정보에 대해 말씀드리겠습니다. ClipboardData를 사용하여 사용자 정의 복사 콘텐츠를 구현하는 경우. 이런 방법으로 페이지의 간단한 텍스트 복사는 물론, 이미지정보 등도 복사할 수 있습니다.

코드 살펴보기

//지정된 DOM에 인터랙티브 이벤트 바인딩

DOM.addEventListener('click',function(){},false){
    // 添加 copy 内容
    document.addEventListener('copy',function copy (e) {
            msg = `<${msg}/>`;
            e.clipboardData.setData(&#39;text/plain&#39;, msg);
            e.preventDefault();
        })
    // 执行 copy 命令
    document.execCommand(&#39;copy&#39;);
    // 移除绑定事件
    document.removeEventListener(&#39;copy&#39;,&#39;copy&#39;);
}

잘라내기 및 붙여넣기 관련

전면은 꽤 단순해 보입니다. 의. 물론, 일부 학생들은 잘라내기와 붙여넣기 같은 다른 이벤트가 있지 않을까라고 생각할 수도 있습니다. 똑같이 할 수 있습니까?
음...
나도 처음에는 그렇게 생각했지만 현실은 부드러운 어루만짐을 주는 경우가 많다. 왜냐하면 악의적으로 사용자 정보를 얻는 것을 방지하기 위해 Chrome에서는 일반적으로 document.execCommand('paste')를 통해 붙여넣기 이벤트를 실행할 수 없기 때문입니다. 그러나 모바일 버전에서는 편집 가능한 요소에서 잘라내기 및 붙여넣기를 실행할 수 있지만 복사는 선택한 유효한 요소에서만 실행될 수 있다는 규칙이 있습니다.

根据上面的说法，我们可以通过利用 paste 的相关方法，来具体应用到实践中。比如，防止用户粘贴信息。这特别适用于那些做题页面，防止你查资料然后 copy 相关答案。

document.addEventListener('paste',function copy (e) {            e.preventDefault();        });
当然，还有更狠的，直接禁止 copy，paste，cut 事件。
['cut', 'copy', 'paste'].forEach((event)=>{    document.addEventListener(event, (e)=>{        e.preventDefault();    });});

方案总结

HTML5 现在能完美提供给我们的应该就是 copy 事件的使用，对于市面上的 clipboard.js 差不多也是运用上述的知识点。根据上面的描述，可以了解到，想要实现复制功能有三种渐进退化方案。以下兼容性由高到低：

input 模式

createRange

clipboard 直接操作

现在 React 比较火，这里我简单的写了一个 copybtn 组件。具体的使用 README 已经写清楚了，如果有什么不懂的地方可以 @我。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

위 내용은 H5 복사 작업 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!