diff options
Diffstat (limited to 'files/de/web/api/htmlelement')
| -rw-r--r-- | files/de/web/api/htmlelement/change_event/index.html | 110 | ||||
| -rw-r--r-- | files/de/web/api/htmlelement/innertext/index.html | 91 |
2 files changed, 201 insertions, 0 deletions
diff --git a/files/de/web/api/htmlelement/change_event/index.html b/files/de/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..0d39f658fc --- /dev/null +++ b/files/de/web/api/htmlelement/change_event/index.html @@ -0,0 +1,110 @@ +--- +title: change +slug: Web/API/HTMLElement/change_event +translation_of: Web/API/HTMLElement/change_event +original_slug: Web/Events/change +--- +<p>Das <code>change</code> Event wird von {{HTMLElement("input")}}, {{HTMLElement("select")}}, und {{HTMLElement("textarea")}} Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum {{event("input")}} Event wird das <code>change</code> Event nicht bei jeder Änderung der <code>value</code> Eigenschaft ausgelöst.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">undefined</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Das <code>change</code> Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:</p> + +<ul> + <li>Wenn das Element aktiviert ist (durch einen KIlick oder Verwendung der Tastatur) bei <code><input type="radio"></code> und <code><input type="checkbox"></code>;</li> + <li>Wenn der Benutzer den Veränderung explizit bestätigt (z.B.: beim Auswählen eines Wertes eines {{HTMLElement("select")}}'s Dropdown mit einem Mausklick, beim Auswählen eine Datums bei einem Date Picker für <code><input type="date"></code>, beim Auswählen einer Datei im File Picker für <code><input type="file"></code>, etc.);</li> + <li>Wenn das Element den Fokus verliert, nachdem sein Wert verändert aber noch nicht bestätigt wurde (z.B.: nach dem Editieren des Wert eines {{HTMLElement("textarea")}} oder <code><input type="text"></code>).</li> +</ul> + +<p>Verschiedene Webbbrowser unterscheiden sich darin, ob das <code>change</code> Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in {{HTMLElement("select")}} Elementen zum Beispiel lösen das <code>change</code> event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <code><select></code> (see {{bug("126379")}}) Element nimmt.</p> + +<p>Die HTML Spezifikation listet<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply"> die <code><input></code> Typen, welche das <code>change</code> Event auslösen können</a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Ein unvollständiges Beispiel auf jsfiddle: <a href="http://jsfiddle.net/nfakc/5/" title="http://jsfiddle.net/nfakc/5/">http://jsfiddle.net/nfakc/5/</a>, welches möglicherweise nich in allen Webbrowsern funktioniert.</p> + +<h3 id="Beispiel_Change_Event_auf_einem_select">Beispiel: Change Event auf einem <code>select</code></h3> + +<p>Der folgende Code behandelt das <code>change</code> Event eines <code>select</code> durch den Aufruf der <code>changeEventHandler</code> Funktion im <code>onchange</code> Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.</p> + +<pre class="brush: html"><html> + <head> + <title>Example: Change event on a select</title> + <script type="text/javascript"> + function changeEventHandler(event) { + alert('You like ' + event.target.value + ' ice cream.'); + } + </script> + </head> + <body> + <label>Choose an ice cream flavor: </label> + <select size="1" onchange="changeEventHandler(event);"> + <option>chocolate</option> + <option>strawberry</option> + <option>vanilla</option> + </select> + </body> +</html> +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{domxref("NetworkInformation.connection")}} löst das <code>change</code> Event aus, wenn sich die Informationen zur Verbindung verändern.</p> + +<h2 id="Webbrowserkompatibilität">Webbrowserkompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<p>Laut <a href="http://www.quirksmode.org/dom/events/">QuirksMode</a> sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.</p> diff --git a/files/de/web/api/htmlelement/innertext/index.html b/files/de/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..1eb8c79e7f --- /dev/null +++ b/files/de/web/api/htmlelement/innertext/index.html @@ -0,0 +1,91 @@ +--- +title: Node.innerText +slug: Web/API/HTMLElement/innerText +tags: + - API DOM Property Reference +translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p><code><strong>Node.innerText</strong></code> ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.</p> + +<p>{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Eingeführt, basiert auf dem <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. Siehe <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> und <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> für die Historie.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{ CompatGeckoDesktop(45) }}</td> + <td>6</td> + <td>9.6 (probably earlier)</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.3 (probably earlier)</td> + <td>{{ CompatGeckoMobile(45) }}</td> + <td>10 (probably earlier)</td> + <td>12</td> + <td>4.1 (probably earlier)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> |