HTML5の実戦とクリップボードイベントの解析

多くの Web サイトでコピー＆ペーストすると、クリップボードに関する関連プロンプトが表示されます。私がフロントエンド エンジニアとして働き始めたとき、これがどのように実現されるのかまだ疑問に思っていました。ブラウザはすでにクリップボード関連のイベントを標準に組み込んでいるので、もう疑問に思う必要はありません。

IE は、クリップボード関連のイベントをサポートし、JavaScript を通じてクリップボード データにアクセスする最初のブラウザです。 IE の実装は事実上の標準となり、その後 Firefox 3 以降、Chrome、Safari 2 以降はすべて同様のイベントとクリップボード アクセスをサポートしましたが、Opera は JavaScript を介したクリップボードへのアクセスをサポートしていませんでした。 HTML5 が登場するまで、クリップボード関連のイベントは HTML5 仕様に組み込まれていました。以下に 6 つのクリップボード イベントを示します。

beforecopy: コピー操作が発生する前にトリガーされます。

copy: コピー操作が発生するときにトリガーされます。カット操作発生 切り取り操作が発生したときにトリガーされます;

beforepaste: 貼り付け操作が発生する前にトリガーされます;

paste: 貼り付け操作が発生したときにトリガーされます。

クリップボード操作には標準がないため、これらのイベントと関連オブジェクトはブラウザごとに異なります。 Firefox、Chrome、および Safari では、beforecopy、beforecut、および beforepaste イベントは、テキスト ボックスのコンテキスト メニューが表示されている場合にのみ発生します (クリップボード イベントが予期されます)。ただし、IE は、コピー、カット、ペーストのイベントをトリガーする前に、これらのイベントをトリガーします。コピー、カット、ペーストのイベントに関しては、コンテキスト メニュー (右クリック メニュー) で対応するオプションが選択されているか、(ctrl+v) などの対応するキーボード キーの組み合わせが使用されている限り、すべてのブラウザでイベントがトリガーされます。 実際のイベントが発生する前に、beforecopy、beforecut、beforepaste イベントを使用して、データをクリップボードに送信する前、またはクリップボードからデータを取得する前にデータを変更できます。ただし、これらのイベントをキャンセルしても、クリップボード上の操作はキャンセルされません。対応する操作の実行を防ぐことができるのは、コピー、カット、ペーストのイベントをキャンセルする場合だけです。

クリップボード内のデータにアクセスするには、clipboardData オブジェクトを使用できます。IE では、clipboardData オブジェクトは window オブジェクトのプロパティであり、Chrome、Safari、Firefox 4 以降では、clipboardData オブジェクトは対応するイベントのプロパティです。ペア。ただし、Chrome、Safari、および Firefox 4 以降では、clipboardData オブジェクトはクリップボード イベントの処理中にのみ有効です。これは、IE でのクリップボードへの不正アクセスを防ぐためであり、clipboardData オブジェクトにはいつでもアクセスできます。ブラウザ間の互換性を確保するには、このオブジェクトをクリップボード イベント中にのみ使用することをお勧めします。 このclipboardDataオブジェクトには、getData()メソッド、setData()メソッド、clearData()メソッドの3つのメソッドがあります。このうち getData() メソッドは、クリップボードからデータを取得するために使用され、取得するデータ形式であるパラメータを受け取ります。 IE には、「text」と「URL」の 2 つのデータ形式があります。Chrome、Safari、および Firefox 4 以降では、このパラメータは MIME タイプです。ただし、「text」は「text/plain」を表すために使用できます。

setData()メソッドの最初のパラメータもデータ型で、2番目のパラメータはクリップボードに配置されるテキストです。最初のパラメータについては、IEはChromeでは引き続き「テキスト」と「URL」をサポートします。 Safari では、MIME タイプは引き続きサポートされていますが、getData() メソッドとは異なり、Chrome および Safari の setData() メソッドは正常に true を返し、それ以外の場合は false を返します。そうは言っても、次の小さな例を見てみましょう

JavaScript コード

//获取剪贴板数据方法
function getClipboardText(event){	var clipboardData = event.clipboardData || window.clipboardData;	return clipboardData.getData("text");
};


//设置剪贴板数据
function setClipboardText(event, value){	if(event.clipboardData){		
return event.clipboardData.setData("text/plain", value);	
}else if(window.clipboardData){		
return window.clipboardData.setData("text", value);	}
};

ここでの getClipboardText() メソッドは、clipboardData オブジェクトの場所を決定し、 getData() メソッドを呼び出すだけです。同様に、setClipboardText() メソッドは、clipboardData オブジェクトを取得した後、さまざまなタイプ ("text/) に応じて setData() として実装する必要があります。 Chrome と Safari の場合は plain"、IE の場合は "text")

テキスト ボックスに貼り付けられたテキストに特定の文字が含まれていること、または特定の形式要件を満たしていることを確認する必要がある場合。クリップボードにアクセスできると非常に便利です。たとえば、 、テキスト ボックスが値のみを受け入れる場合は、貼り付けイベントで、貼り付けられた値が有効であるかどうかを確認する必要があります。無効な場合は、デフォルトをキャンセルできます。以下の例に示すように動作します。

ここでは、onpaste イベント ハンドラーを使用します。これにより、クリップボードの値が正規表現と一致しない場合、貼り付け操作がキャンセルされます。および Safari では、onpaste イベント ハンドラーの getData() メソッドへのアクセスのみが許可されます。

すべてのブラウザがクリップボードへのアクセスをサポートしているわけではないため、より簡単な方法は、1 つ以上のクリップボード操作をブロックすることです。コピー、切り取り、および貼り付けイベントをサポートするブラウザー (Firefox 3 以降、Safari、Chrome、および IE) では、これらのイベントのデフォルトの動作を簡単に防止できます。 Opera では、これらのイベントをトリガーするキーストロークを防止し、テキスト ボックスにコンテキスト メニュー (右クリック メニュー) が表示されないようにする必要があります。

クリップボード関連のイベントは HTML5 仕様に含まれていますが、Opera はクリップボード関連のイベントをまだサポートしていないため、実際の適用は依然として頭の痛い問題です。これで、HTML5 の実戦とクリップボード イベントの分析についての紹介は終わりました。HTML5 に関するさらに詳しい知識については、Menglong Station の関連アップデートに注目してください。

上記は HTML5 の実戦とクリップボード イベントの分析の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。