diff options
Diffstat (limited to 'files/ja/web/api/htmlelement/oncut/index.html')
| -rw-r--r-- | files/ja/web/api/htmlelement/oncut/index.html | 132 |
1 files changed, 76 insertions, 56 deletions
diff --git a/files/ja/web/api/htmlelement/oncut/index.html b/files/ja/web/api/htmlelement/oncut/index.html index 3e572d1e61..5eb4abb44d 100644 --- a/files/ja/web/api/htmlelement/oncut/index.html +++ b/files/ja/web/api/htmlelement/oncut/index.html @@ -1,64 +1,84 @@ --- -title: element.oncut +title: HTMLElement.oncut slug: Web/API/HTMLElement/oncut tags: - - DOM - - Gecko - - Gecko DOM Reference +- API +- Event Handler +- Experimental +- HTMLElement +- NeedsSpecTable +- Property +- Reference +browser-compat: api.HTMLElement.oncut translation_of: Web/API/HTMLElement/oncut --- -<p> </p> -<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> -<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> -<p><b>oncut</b> プロパティは、現在の要素での onCut イベントハンドラのコードを返します。</p> -<p>{{ 英語版章題("Syntax") }}</p> -<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> -<pre class="eval"><i>element</i>.oncut =<i>functionRef</i>; -</pre> -<p>ここでの - <i> - functionRef</i> - は、関数です。それは、たいてい、他の場所で宣言された関数の名前、あるいは、 - <i> - function 式</i> - です。<a href="ja/Core_JavaScript_1.5_Reference/Functions">Core JavaScript 1.5 Reference:Functions</a> を参照してください。</p> -<p>{{ 英語版章題("Example") }}</p> -<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> -<pre><html> -<head> -<title>oncut event example</title> - -<script> - function log(txt) - { - document.getElementById("log").appendChild(document.createTextNode(txt + "\n")); - } -</script> -</head> - -<body> -<h3>Play with this editor!</h3> -<textarea rows="3" cols="80" oncopy="log('Copied!');" oncut="log('Cut blocked!'); return false;"> - Try copying and cutting the text in this area! -</textarea> -<h3>Log</h3> -<textarea rows="15" cols="80" id="log" readonly="true"></textarea> -</body> -</html> +<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> -<p>この例では、テキストエリアからテキストをコピーすることはできますが、切り取ることはできません。また、コピーと切り取りの試みのログを表示します。</p> -<p>{{ 英語版章題("Notes") }}</p> -<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> -<p>このイベントは、ユーザがテキストを切り取ろうとしたときに発生します。</p> -<p>{{ 英語版章題("Specification") }}</p> -<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> -<p>仕様の一部ではありません。</p> -<p>{{ 英語版章題("See also") }}</p> -<h3 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">参照</h3> + +<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"><h3>このテキストエリアで実行しましょう。</h3> +<textarea id="editor" rows="3">このフィールド内のテキストをコピーしたり切り取りしたりしてみましょう。</textarea> + +<h3>ログ:</h3> +<p id="log"></p></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><code><a href="ja/DOM/element.oncopy">oncopy</a></code></li> - <li><code><a href="ja/DOM/element.onpaste">onpaste</a></code></li> + <li>クリップボード API イベント {{event("cut")}}</li> + <li>関連するイベントハンドラー + <ul> + <li>{{domxref("HTMLElement.oncopy")}}</li> + <li>{{domxref("HTMLElement.onpaste")}}</li> + </ul> + </li> </ul> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/element.oncut" } ) }}</p> |