From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/htmlelement/input_event/index.html | 100 +++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ja/web/api/htmlelement/input_event/index.html (limited to 'files/ja/web/api/htmlelement/input_event') diff --git a/files/ja/web/api/htmlelement/input_event/index.html b/files/ja/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..5b8c2f71cf --- /dev/null +++ b/files/ja/web/api/htmlelement/input_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'HTMLElement: input イベント' +slug: Web/API/HTMLElement/input_event +translation_of: Web/API/HTMLElement/input_event +--- +

{{APIRef}}

+ +

input イベントは、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素の value が変更されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{DOMxRef("InputEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.oninput")}}
+ +

このイベントは、 {{domxref("HTMLElement.contentEditable", "contenteditable")}} を有効にした要素、 {{domxref("Document.designMode", "designMode")}} を有効にしたすべての要素にも適用されます。 contenteditable や designMode の場合、イベントのターゲットは編集ホストです。これらのプロパティが複数の要素に適用された場合、編集ホストは親が編集可能ではない直近の祖先要素になります。

+ +

<input> 要素が type=checkbox または type=radio 型であった場合、 HTML5 仕様書によれば、 input イベントはユーザーがコントロールの状態を変更するたびに発生することになっています。しかし、歴史的に常にそうなるとは限りません。互換性に注意するか、これらの種類の要素では、代わりに {{domxref("HTMLElement/change_event", "change")}} イベントを使用するようにするかしてください。

+ +
+

注: input イベントは、要素の value の値が変化するたびに発生します。これは、 {{domxref("HTMLElement/change_event", "change")}} イベントが Enter キーが押されたり、選択肢から値が選択されたりするような、値が決定したときに発生するのとは異なります。

+
+ +

例

+ +

この例では、 {{HtmlElement("input")}} 要素の値が変化するたびに値をログ出力します。

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="values"></p>
+ +

JavaScript

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

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf