Události:změna, zadání, vyjmutí, kopírování, vložení

Pojďme se podívat na různé události, které doprovázejí aktualizace dat.

Událost:změna

change událost se spustí, když prvek dokončí změnu.

Pro textové vstupy to znamená, že událost nastane, když ztratí fokus.

Například, když píšeme do textového pole níže – nedochází k žádné události. Když ale přesuneme fokus někam jinam, například klikneme na tlačítko – objeví se change událost:

<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">

Pro ostatní prvky:select , input type=checkbox/radio spustí se hned po změně výběru:

<select onchange="alert(this.value)">
 <option value="">Select something</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>

Událost:vstup

input událost se spustí pokaždé, když uživatel změní hodnotu.

Na rozdíl od událostí klávesnice se spouští při jakékoli změně hodnoty, dokonce i při těch, které nezahrnují akce klávesnice:vkládání pomocí myši nebo pomocí rozpoznávání řeči k diktování textu.

Například:

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
 input.oninput = function() {
 result.innerHTML = input.value;
 };
</script>

Pokud chceme zvládnout každou úpravu <input> pak je tato událost tou nejlepší volbou.

Na druhé straně input událost se nespustí při vstupu z klávesnice a další akce, které nezahrnují změnu hodnoty, např. stisknutím kláves se šipkami ⇦ ⇨ při vstupu.

input událost nastane po změně hodnoty.

Nemůžeme tedy použít event.preventDefault() tam – už je příliš pozdě, nemělo by to žádný účinek.

Události:vyjmout, zkopírovat, vložit

K těmto událostem dochází při vyjímání/kopírování/vkládání hodnoty.

Patří do třídy ClipboardEvent a poskytují přístup k datům, která jsou vyjímána/kopírována/vkládána.

Můžeme také použít event.preventDefault() pro zrušení akce, pak se nic nezkopíruje/vloží.

Například níže uvedený kód zabraňuje všem cut/copy/paste události a zobrazuje text, který se snažíme vyjmout/zkopírovat/vložit:

<input type="text" id="input">
<script>
 input.onpaste = function(event) {
 alert("paste: " + event.clipboardData.getData('text/plain'));
 event.preventDefault();
 };

 input.oncut = input.oncopy = function(event) {
 alert(event.type + '-' + document.getSelection());
 event.preventDefault();
 };
</script>

Poznámka:uvnitř cut a copy obsluhy událostí volání na event.clipboardData.getData(...) vrátí prázdný řetězec. Je to proto, že technicky data ještě nejsou ve schránce. Pokud použijeme event.preventDefault() nebude zkopírován vůbec.

Výše uvedený příklad tedy používá document.getSelection() abyste získali vybraný text. Další podrobnosti o výběru dokumentů naleznete v článku Výběr a rozsah.

Je možné zkopírovat/vložit nejen text, ale vše. Můžeme například zkopírovat soubor ve správci souborů OS a vložit jej.

To proto, že clipboardData implementuje DataTransfer rozhraní, běžně používané pro přetahování a kopírování/vkládání. Je to teď trochu mimo náš rozsah, ale jeho metody najdete ve specifikaci DataTransfer.

K dispozici je také další asynchronní rozhraní API pro přístup ke schránce:navigator.clipboard . Více o tom ve specifikaci Clipboard API a události, které Firefox nepodporuje.

Bezpečnostní omezení

Schránka je „globální“ věc na úrovni OS. Uživatel může přepínat mezi různými aplikacemi, kopírovat/vkládat různé věci a stránka prohlížeče by to všechno neměla vidět.

Většina prohlížečů tedy umožňuje bezproblémový přístup ke čtení/zápisu do schránky pouze v rámci určitých uživatelských akcí, jako je kopírování/vkládání atd.

Je zakázáno generovat „vlastní“ události schránky s dispatchEvent ve všech prohlížečích kromě Firefoxu. A i když se nám podaří takovou událost odeslat, specifikace jasně říká, že takové „syntetické“ události nesmějí poskytovat přístup do schránky.

I když se někdo rozhodne uložit event.clipboardData v obslužné rutině události a poté k ní přistupovat později – nebude to fungovat.

Pro zopakování, event.clipboardData funguje výhradně v kontextu obslužných programů událostí spouštěných uživatelem.

Na druhou stranu navigator.clipboard je novější API, určené pro použití v jakémkoli kontextu. V případě potřeby požádá o povolení uživatele.

Shrnutí

Události změny dat: