Zdarzenia#
Typ beforeinput#
| Typ: | beforeinput |
|---|---|
| Interfejs: | InputEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element (w szczególności typu kontrolnego: HTMLInputElement, HTMLTextAreaElement, HTMLSelectElement) lub dowolny Element z włączonym atrybutem contenteditable |
| Anulowanie | Tak |
| Domyślna akcja | Aktualizacja elementu DOM |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu beforeinput musi zostać wysłane przez aplikację kliencką w chwili, kiedy DOM ma zostać zaktualizowany (jeszcze przed wystąpieniem zdarzenia input).
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input {vertical-align: top;}
input:hover, #box:hover {outline: 3px solid green;}
#box {width: 200px; height: 100px; display: inline-block; background-color: #a08080;}
</style>
</head>
<body>
<p>Edytuj zawartość poniższych elementów by odczytać poszczególne cechy zdarzenia.</p>
<div id="box" contenteditable="true">Edytowalny kontener</div>
<input size="40" type="text" value="Jakiś początkowy tekst">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var box = document.getElementById("box");
var input = document.getElementsByTagName("input")[0];
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.view: " + e.view
+ "<br>" + "e.detail: " + e.detail
+ "<br>" + "e.data: " + e.data
+ "<br>" + "e.isComposing: " + e.isComposing
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
box.addEventListener("beforeinput", readInfo, false);
box.addEventListener("input", readInfo, false);
input.addEventListener("beforeinput", readInfo, false);
input.addEventListener("input", readInfo, false);
</script>
</body>
</html>Na chwilę obecną żadna aktualna przeglądarka internetowa nie obsługuje zdarzenia typu beforeinput.
Specyfikacje i inne materiały#
Pasek społecznościowy