files/ja/web/api/htmlelement/oncut/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

---
title: HTMLElement.oncut
slug: Web/API/HTMLElement/oncut
tags:
- API
- Event Handler
- Experimental
- HTMLElement
- NeedsSpecTable
- Property
- Reference
browser-compat: api.HTMLElement.oncut
translation_of: Web/API/HTMLElement/oncut
---
<div>{{ APIRef("HTML DOM") }} {{SeeCompatTable}}</div>

<p><code><strong>HTMLElement.oncut</strong></code> は {{domxref("HTMLElement")}} インターフェイスのプロパティで、 {{event("cut")}} イベントを処理する<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p>

<p><code>cut</code> イベントは、ユーザーがテキストを切り取りしようとしたときに発行されます。</p>

<h2 id="Syntax">構文</h2>

<pre class="brush: js"><em>target</em>.oncut = <em>functionRef</em>;
</pre>

<h3 id="Value">値</h3>

<p><code>functionRef</code> は関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は唯一の引数として {{domxref("ClipboardEvent")}} オブジェクトを受け取ります。</p>

<h2 id="Example">例</h2>

<p>この例では、テキストを {{htmlElement("textarea")}} からコピーすることはできますが、テキストを切り取りすることはできません。また、コピーと切り取りを仕様としたことをそれぞれ記録します。</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;h3&gt;このテキストエリアで実行しましょう。&lt;/h3&gt;
&lt;textarea id="editor" rows="3"&gt;このフィールド内のテキストをコピーしたり切り取りしたりしてみましょう。&lt;/textarea&gt;

&lt;h3&gt;ログ:&lt;/h3&gt;
&lt;p id="log"&gt;&lt;/p&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">function logCopy(event) {
  log.innerText = 'Copied!\n' + log.innerText;
}

function preventCut(event) {
  event.preventDefault();
  log.innerText = 'Cut blocked!\n' + log.innerText;
}

const editor = document.getElementById('editor');
const log = document.getElementById('log');

editor.oncopy = logCopy;
editor.oncut = preventCut;</pre>

<h3 id="Result">結果</h3>

<p>{{EmbedLiveSample("Example", 700, 300)}}</p>

<h2 id="Specifications">仕様書</h2>

<p><a href="https://html.spec.whatwg.org/multipage/webappapis.html#handler-oncut">WHATWG
    標準</a></p>

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat}}</p>

<p>Firefox 13 以降では、設定項目 <code>dom.event.clipboardevents.enabled</code> でこの機能を制御できます。既定では <code>true</code> になっていますが、無効にすることができます。</p>

<h2 id="See_also">関連情報</h2>

<ul>
  <li>クリップボード API イベント {{event("cut")}}</li>
  <li>関連するイベントハンドラー
    <ul>
      <li>{{domxref("HTMLElement.oncopy")}}</li>
      <li>{{domxref("HTMLElement.onpaste")}}</li>
    </ul>
  </li>
</ul>