From 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 10 Dec 2020 08:37:18 -0500 Subject: dump 2020-12-10 --- .../api/htmlelement/beforeinput_event/index.html | 44 ++++++++++++++-------- 1 file changed, 28 insertions(+), 16 deletions(-) (limited to 'files/ja/web/api/htmlelement/beforeinput_event') diff --git a/files/ja/web/api/htmlelement/beforeinput_event/index.html b/files/ja/web/api/htmlelement/beforeinput_event/index.html index 4939f3e9b8..060277ae97 100644 --- a/files/ja/web/api/htmlelement/beforeinput_event/index.html +++ b/files/ja/web/api/htmlelement/beforeinput_event/index.html @@ -2,19 +2,20 @@ title: 'HTMLElement: beforeinput イベント' slug: Web/API/HTMLElement/beforeinput_event tags: - - DOM + - API - Event - - Experimental + - HTML DOM + - HTMLElement - InputEvent - Reference - beforeinput translation_of: Web/API/HTMLElement/beforeinput_event --- -
{{APIRef}} {{SeeCompatTable}}
+
{{APIRef}}
-

DOM の beforeinput イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。

+

DOM の beforeinput イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。

-

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

+

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

@@ -43,7 +44,7 @@ translation_of: Web/API/HTMLElement/beforeinput_event - + @@ -51,16 +52,27 @@ translation_of: Web/API/HTMLElement/beforeinput_event

例

-

この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。

+

機能の検出

-

HTML

+

以下の関数は、 beforeinput に対応していれば true を返します。

-
<input placeholder="テキストを入力" name="name"/>
+
function isBeforeInputEventAvailable() {
+  return typeof InputEvent.prototype.getTargetRanges === "function";
+}
+

+
+
単純なロガー

+
+
この例では、 {{HtmlElement("input")}} 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録しています。

+
+
HTML

+
+
<input placeholder="テキストを入力" name="name"/>
 <p id="values"></p>

 
-
JavaScript

+
JavaScript

 
-
const input = document.querySelector('input');
+
const input = document.querySelector('input');
 const log = document.getElementById('values');
 
 input.addEventListener('beforeinput', updateValue);
@@ -69,16 +81,16 @@ function updateValue(e) {
   log.textContent = e.target.value;
 }

 
-
結果

+
結果

 
-
{{EmbedLiveSample("Examples")}}

+
{{EmbedLiveSample("Simple_logger")}}

 
-
仕様

+
仕様書
はい
デフォルトのアクション既定のアクション DOM 要素の更新
- + @@ -90,7 +102,7 @@ function updateValue(e) {

ブラウザーの互換性

- +

{{Compat("api.HTMLElement.beforeinput_event")}}

-- cgit v1.2.3-54-g00ecf
仕様仕様書 状態