dump 2020-12-10

1 files changed, 28 insertions, 16 deletions

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
 ---
-<div>{{APIRef}} {{SeeCompatTable}}</div>
+<div>{{APIRef}}</div>
 
-<p><span class="seoSummary">DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</span></p>
+<p>DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</p>
 
-<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<em>編集ホスト</em>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p>
+<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<strong>編集ホスト</strong>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p>
 
 <table class="properties">
  <tbody>
@@ -43,7 +44,7 @@ translation_of: Web/API/HTMLElement/beforeinput_event
    <td>はい</td>
   </tr>
   <tr>
-   <th>デフォルトのアクション</th>
+   <th>既定のアクション</th>
    <td>DOM 要素の更新</td>
   </tr>
  </tbody>
@@ -51,16 +52,27 @@ translation_of: Web/API/HTMLElement/beforeinput_event
 
 <h2 id="Examples" name="Examples">例</h2>
 
-<p>この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。</p>
+<h3 id="機能の検出">機能の検出</h3>
 
-<h3 id="HTML" name="HTML">HTML</h3>
+<p>以下の関数は、 <code>beforeinput</code> に対応していれば true を返します。</p>
 
-<pre class="brush: html">&lt;input placeholder="テキストを入力" name="name"/&gt;
+<pre class="brush: js notranslate">function isBeforeInputEventAvailable() {
+  return typeof InputEvent.prototype.getTargetRanges === "function";
+}
+</pre>
+
+<h3 id="Simple_logger" name="Simple_logger">単純なロガー</h3>
+
+<p>この例では、 {{HtmlElement("input")}} 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録しています。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;input placeholder="テキストを入力" name="name"/&gt;
 &lt;p id="values"&gt;&lt;/p&gt;</pre>
 
-<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+<h4 id="JavaScript">JavaScript</h4>
 
-<pre class="brush: js">const input = document.querySelector('input');
+<pre class="brush: js notranslate">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;
 }</pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h4 id="Result" name="Result">結果</h4>
 
-<p>{{EmbedLiveSample("Examples")}}</p>
+<p>{{EmbedLiveSample("Simple_logger")}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様</h2>
+<h2 id="Specifications" name="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <tbody>
   <tr>
-   <th scope="col">仕様</th>
+   <th scope="col">仕様書</th>
    <th scope="col">状態</th>
   </tr>
   <tr>
@@ -90,7 +102,7 @@ function updateValue(e) {
 
 <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
 
-
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
 
 <p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>