クリップボードの使用は必須のスキルです。コード作成者であれば、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><a href="http://www.php.cn/js-tutorial-21941.html" target="_self">ただし、Chrome ではコピー名の使用をサポートしていますが、どちらのメソッドも false を返します。したがって、チェック コードを try-catch ブロックでラップする方がよいでしょう。 </a></p>次のステップでは、ユーザーに何をコピーできるようにする必要がありますか?テキストは強調表示する必要があり、すべてのブラウザは select() メソッドを使用してテキスト入力およびテキストエリア内のテキストを選択できます。同時に、Firefox と Chrome/Opera は、次のように、任意の要素からテキストを選択できる <code>document.createRange
メソッドもサポートしています。 IE/Edgeはサポートしておりません。
🎜rrreee🎜🎜自分で実装してください🎜🎜🎜clipboard.js次の機能の一部のみを実装する場合は、20 行のコード内で実装できます: 🎜🎜🎜一部のフォーム要素のみをコピーできます 🎜🎜🎜サポートされていないブラウザー (はい、つまり Safari) の場合、これにより、選択したテキストが強調表示され、ユーザーは Ctrl/Cmd + C を押すように求められます。 🎜🎜clipboard.js と同様に、まずメソッドをトリガーするボタンを作成します。これには、コピーされる要素 (つまり #website) を指すデータ属性 data-copytarget があります🎜🎜🎜rrreee🎜例 🎜🎜上記の例では、スタイルとアニメーションのコードを含めてコードが 20 行を超えていますが、アニメーションとスタイルはオプションです。 🎜🎜概要: 🎜🎜🎜🎜 .select() を介してコピーするフォーム要素のコンテンツを選択します 🎜🎜🎜🎜 document.execCommand("copy") メソッドを呼び出します 🎜🎜🎜🎜から .blur() メソッドを呼び出しますフォーム要素 フォーカスを削除します🎜🎜🎜🎜 ステップ 2 と 3 を try catch ブロックで囲みます🎜🎜🎜🎜🎜🎜その他の方法🎜🎜🎜クリップボード。たとえば、Trello.com では、カードの上にカーソルを置くときに Ctrl / Cmd + C
を押して、カードのリンク アドレスをクリップボードにコピーできます。その背後にある実装では、まず URL を含む非表示のフォーム要素を作成し、次にそのコンテンツを選択してコピーします。非常に賢くて便利です - この機能について知っているユーザーはほとんどいないと思います。 🎜🎜関連する推奨事項: 🎜🎜🎜js は、ペーストボードにコピーする関数コードを実装します_基礎知識🎜🎜🎜🎜JavaScript は、コンテンツをペーストボードにコピーするコードを実装します_javascript スキル🎜🎜🎜🎜js は、画像をクリックして画像アドレスをペーストボードにコピーする機能を実装しますMethod_JavaScript スキル 🎜🎜
以上がJSはペーストボードのコピー機能のコード共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

WebStorm Mac版
便利なJavaScript開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

Dreamweaver Mac版
ビジュアル Web 開発ツール
