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/zh-cn/web/events/paste/index.html | 103 ++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 files/zh-cn/web/events/paste/index.html (limited to 'files/zh-cn/web/events/paste/index.html') diff --git a/files/zh-cn/web/events/paste/index.html b/files/zh-cn/web/events/paste/index.html new file mode 100644 index 0000000000..1fb088eddf --- /dev/null +++ b/files/zh-cn/web/events/paste/index.html @@ -0,0 +1,103 @@ +--- +title: 'Element: paste事件' +slug: Web/Events/paste +tags: + - Clipboard API + - Event + - Reference +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事件，但这不会影响文档内容。

+ +

举例

+ +

Live example

+ +

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>
+ +

CSS

+ +
div.source, div.target {
+    border: 1px solid gray;
+    margin: .5rem;
+    padding: .5rem;
+    height: 1rem;
+    background-color: #e9eef1;
+}
+
+ +

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();
+});
+
+ +

Result

+ +

 {{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