From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/element/paste_event/index.html | 120 ++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/ja/web/api/element/paste_event/index.html (limited to 'files/ja/web/api/element/paste_event/index.html') diff --git a/files/ja/web/api/element/paste_event/index.html b/files/ja/web/api/element/paste_event/index.html new file mode 100644 index 0000000000..bf7a667dfa --- /dev/null +++ b/files/ja/web/api/element/paste_event/index.html @@ -0,0 +1,120 @@ +--- +title: 'Element: paste イベント' +slug: Web/API/Element/paste_event +tags: + - Clipboard API + - ClipboardEvent + - Element + - Event + - NeedsUpdate + - paste + - イベント + - リファレンス +translation_of: Web/API/Element/paste_event +--- +
{{APIRef}}
+ +

paste イベントは、ユーザーがブラウザーのユーザーインターフェイスで「貼り付け」操作を行ったときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/onpaste", "onpaste")}}
+ +

カーソルが編集可能なコンテキストにある場合 ({{HTMLElement("textarea")}} や contenteditable 属性が true である要素など)、既定のアクションはクリップボードの内容を文書のカーソル位置に挿入します。

+ +

このイベントのハンドラーは、イベントの clipboardData プロパティにある {{domxref("DataTransfer/getData", "getData()")}} を呼び出すことでクリップボードの中身にアクセスすることができます。

+ +

既定の動作を上書きする場合 (例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など)、イベントハンドラーで {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。

+ +

統合的な paste イベントを構築して配信することができますが、文書の内容には影響しません。

+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="source" contenteditable="true">Try copying text from this box...</div>
+<div class="target" contenteditable="true">...and pasting it into this one</div>
+ + + +

JS

+ +
const target = document.querySelector('div.target');
+
+target.addEventListener('paste', (event) => {
+    let paste = (event.clipboardData || window.clipboardData).getData('text');
+    paste = paste.toUpperCase();
+
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return false;
+    selection.deleteFromDocument();
+    selection.getRangeAt(0).insertNode(document.createTextNode(paste));
+
+    event.preventDefault();
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '100px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-paste')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Element.paste_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf