H5コピー操作サンプルコード

当初、Web 上にはクリップボードにアクセスできるコンテンツはありませんでした。以前は、コピー/貼り付け/切り取りを実行したい場合は Flash しか使用できませんでした。しかし今、偉大な H5 または W3C が H5 コントロールのクリップボードにドラフトを起動しました。最も有名なのは 2 つの API です:

document.execCommand()
ClipboardEvent

それらについて段階的に学習してみましょう。まず、古典的な execCommand の使用法を見てみましょう。

コピー操作

input copy

まず基本的なコピープロセスを理解する必要があります:

select (選択)

copy (command + c || ctrl + c)

execCommand もこのプロセスに従い、この効果を実現します。 execCommand を使用してコピーを実行する場合は、まずコピーする要素を選択する必要があります。
ここでは、新しい API window.getSelection() も使用されます。具体的には:

getSelection(): 現在選択されている要素のコンテンツを取得するために使用されます。一般に、ページ上のコンテンツを選択するにはマウスを使用します。

toString(): 選択したコンテンツをテキストに直接変換するために使用されます。

基本的な使用法は次のとおりです:

//選択したテキストを出力します

window.getSelection().toString();

通常、この API は補助機能にのみ使用されます。最も一般的なアプローチは、input 要素を動的に作成してから、input[value] を動的に指定することです。 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() もその 1 つです。使用される API は次のとおりです:

document.createRange(): 選択したコンテナーを作成するために使用されます。範囲Objectを返します。 このAPIの互換性も非常に良く、携帯電話とPCの両方でサポートされています。

selectNode(DOM): 範囲オブジェクトにマウントされたメソッドを返します。選択した要素を追加するために使用されます。追加できるのは

window.getSelection()

addRange(range) の 1 つだけです。このメソッドは 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 Constructor をサポートしている場合。そうすれば、コピー操作は非常に簡単になります。

// もちろん、次のコードはインタラクションのクリック イベントに配置する必要があります。

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

そうでない場合は、ドキュメントのコピー イベントで返されるevent.clipboardData APIを使用して、関連情報を設定または取得することしかできません。 ClipboardData オブジェクト は、イベント コールバックを通じてのみ取得できます:

e.clipboardData: ドキュメントのコピー/貼り付け/切り取りイベントを通じてのみ取得できます

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

clipboardData: この obj は、一般的に使用される 2 つの API もマウントします

format : 基本的な 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 中国語 Web サイトの他の関連記事を参照してください。