From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/inputevent/index.html | 142 +++++++++++++++++++++++ files/ja/web/api/inputevent/inputtype/index.html | 94 +++++++++++++++ 2 files changed, 236 insertions(+) create mode 100644 files/ja/web/api/inputevent/index.html create mode 100644 files/ja/web/api/inputevent/inputtype/index.html (limited to 'files/ja/web/api/inputevent') diff --git a/files/ja/web/api/inputevent/index.html b/files/ja/web/api/inputevent/index.html new file mode 100644 index 0000000000..f237b44e5c --- /dev/null +++ b/files/ja/web/api/inputevent/index.html @@ -0,0 +1,142 @@ +--- +title: InputEvent +slug: Web/API/InputEvent +tags: + - API + - DOM + - Interface +translation_of: Web/API/InputEvent +--- +

{{APIRef("DOM Events")}}

+ +

InputEvent インターフェイスは、編集可能なコンテンツが変更されたことを通知するイベントを表します。

+ +

コンストラクタ

+ +
+
{{domxref("InputEvent.InputEvent", "InputEvent()")}}
+
InputEvent オブジェクトを作成します。
+
+ +

プロパティ

+ +

このインターフェイスは、親インターフェイスである {{domxref("UIEvent")}}、{{domxref("Event")}} のプロパティを継承します。

+ +
+
{{domxref("InputEvent.data")}} {{readOnlyInline}}
+
挿入された文字を {{domxref("DOMString")}} で返します。変更により挿入されたテキストがない (例えば文字を削除する) 場合は、空文字列になるでしょう。
+
{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
+
イベントが {{event("compositionstart")}} の後かつ {{event("compositionend")}} の前に発生したかを示す {{jsxref("Boolean")}} 値を返します。
+
+ +

メソッド

+ +

このインターフェイスではメソッドが定義されていませんが、親インターフェイスである {{domxref("UIEvent")}}、{{domxref("Event")}} のメソッドを継承します。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM3 Events','#interface-InputEvent','InputEvent')}}{{Spec2('DOM3 Events')}}最初期の定義
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatNo}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
isComposing(){{CompatNo}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{CompatNo}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
data{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
isComposing(){{CompatNo}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/inputevent/inputtype/index.html b/files/ja/web/api/inputevent/inputtype/index.html new file mode 100644 index 0000000000..fb84844798 --- /dev/null +++ b/files/ja/web/api/inputevent/inputtype/index.html @@ -0,0 +1,94 @@ +--- +title: InputEvent.inputType +slug: Web/API/InputEvent/inputType +tags: + - API + - DOM + - DOM Events + - Input + - InputEvent + - Property + - Reference + - events + - inputType + - プロパティ +translation_of: Web/API/InputEvent/inputType +--- +
{{APIRef("DOM Events")}}
+ +

inputType は {{domxref("InputEvent")}} インターフェイスの読取専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。

+ +

構文

+ +
var aString = inputEvent.inputType;
+ +

値

+ +

入力された入力種別を含む {{domxref("DOMString")}}。 insertText, deleteContentBackward, insertFromPaste, formatBold など、多くの値が考えられます。利用可能な入力種別の完全なリストは、Input Events Level 1 仕様の Attributes の章を参照してください。

+ +

例

+ +

この例は編集可能な {{htmlElement("div")}} の入力イベント の inputType をログ出力します。

+ +

HTML

+ +
<p id="log">Input type: </p>
+<div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;">
+  <p>Some sample text. Try inserting line breaks, or deleting text in different ways, or pasting different content in.</p>
+  <hr>
+  <ul>
+    <li>A sample</li>
+    <li>bulleted</li>
+    <li>list.</li>
+  </ul>
+  <p>Another paragraph.</p>
+</div>
+ +

JavaScript

+ +
const log = document.getElementById('log');
+const editable = document.querySelector('div[contenteditable]');
+editable.addEventListener('input', logInputType);
+
+function logInputType(event) {
+  log.textContent = `Input type: ${event.inputType}`;
+}
+
+ +

結果

+ +

Try editing the text inside the <div> and see what happens.

+ +

{{EmbedLiveSample("Examples", '100%', 500)}}

+ +
+

注: もっと詳細な例として Masayuki Nakano's InputEvent test suite も参照してください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('UI Events','#dom-inputevent-inputtype','inputType')}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

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