From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/globaleventhandlers/onchange/index.html | 84 ++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 files/ja/web/api/globaleventhandlers/onchange/index.html (limited to 'files/ja/web/api/globaleventhandlers/onchange') diff --git a/files/ja/web/api/globaleventhandlers/onchange/index.html b/files/ja/web/api/globaleventhandlers/onchange/index.html new file mode 100644 index 0000000000..997d2a769d --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onchange/index.html @@ -0,0 +1,84 @@ +--- +title: GlobalEventHandlers.onchange +slug: Web/API/GlobalEventHandlers/onchange +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onchange +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの onchange プロパティは、change イベントを処理する {{domxref("EventHandler")}} です。

+ +

change イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり Tab キーで別のコントロールへ切り替えたりすることにより行われることがあります。

+ +
+

注記: {{domxref("GlobalEventHandlers.oninput", "oninput")}} と異なり、onchange イベントハンドラーは、各要素の value が変化するたびに呼び出される必要がありません。

+
+ +

構文

+ +
target.onchange = functionRef;
+
+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("Event")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

+ +

この例は、{{HtmlElement("input")}} 要素のコンテンツを変更してフォーカスを要素から外す度に、その文字数をログ出力します。

+ +

HTML

+ +
<input type="text" placeholder="Type something here, then click outside of the field." size="50">
+<p id="log"></p>
+ +

JavaScript

+ +
let input = document.querySelector('input');
+let log = document.getElementById('log');
+
+input.onchange = handleChange;
+
+function handleChange(e) {
+  log.textContent = `The field's value is
+      ${e.target.value.length} character(s) long.`;
+}
+ +

実行結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onchange")}}

+
+ +

関連項目

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