A contenteditable egy olyan HTML tulajdonság, melynek segítségével szerkeszthetővé tehetjük az elemeinket, úgy mintha azok input mezők lennének.

progressive-enhancement-es-grafcul-degradation

A tulajdonság eredeti célja az volt, hogy segítségével új, modernebb WYSIWYG szerkesztőket lehessen létrehozni, melyekhez nincs szükség iframe használatára.

A tulajdonságnak három értéke lehet:

  • contenteditable=”” vagy contenteditable=”true” – engedélyezi az elem szerkeszthetőségét,
  • contenteditable=”false” – az elem nem szerkeszthető,
  • contenteditable=”inherit” – az elem szerkeszthető, ha a szülő elem is szerkeszthető.

See the Pen Contenteditable tulajdonság – 01 by Adam Laki (@adamlaki) on CodePen.

Esemény figyelése

Mivel a contenteditable tulajdonsággal ellátott mezőnknek változhat a tartalma, felmerül a kérdés, hogy milyen eseménnyel tudjuk mindezt figyelni.

A következő eseményeket használhatjuk:

  • focus – akkor fut le, amikor a szerkeszthető részbe kattintunk,
  • input – akkor fut le, amikor változik a szerkesztett rész tartalma,
  • keypress – akkor fut le, amikor gépelünk a szerkesztett mezőbe,
  • blur – akkor fut le, amikor kikattintunk a szerkesztett mezőből.

Változás figyelésére a legegyszerűbb, ha az input eseményt használjuk a következőképpen:

document.getElementById('editable-text').addEventListener('input', function() {
    console.log('Változott a tartalmunk!');
});

Nyelvi ellenőrzés

Kissé bosszantó lehet, hogy amint egy ilyen mező szerkeszthető, onnantól a legtöbb böngésző máris ellenőrzi a tartalma helyesírását. Ezt egyszerűen kikapcsolhatjuk a spellcheck tulajdonság használatával:

<div contenteditable="true" spellcheck="false">Az elem tartalma.</div>

A spellcheck tulajdonságot az input, textarea és a contenteditable elemeken tudjuk használni!

Kurzor pozíció beállítása

Ha egy olyan elemet szeretnénk szerkeszthetővé tenni, aminek már van tartalma, de még nem rendelkezik a contenteditable tulajdonsággal, akkor jó ha a kurzor pozícióját az elem végére állítjuk. Ez a használati eset akkor jöhet elő, ha az adott elem szerkesztését egy gomb megnyomásától tesszük függővé!

Ezt a következő kódrészlet segítségével érhetjük el:

var node = document.querySelector("div"),
    textNode = node.firstChild,
    caret = textNode.length,
    range = document.createRange(),
    sel = window.getSelection();

node.focus();

range.setStart(textNode, caret);
range.setEnd(textNode, caret);

sel.removeAllRanges();
sel.addRange(range);

Firefox bug

A tulajdonságnak van egy hibája Firefox-ban, ami akkor jelentkezik, ha egy szerkeszthető mezőt teljesen kitörlünk. Ilyenkor az elem felugrik, módosítja a pozícióját. Ezt a következőképpen tudjuk megoldani:

@-moz-document url-prefix() {
    &::after {
        content: "l";
        color: transparent;
        font-size: 0px;
        width: 0;
        height: 0;
        display: inline;
    }
}

A fenti kódrészlet használatával az elem után illesztünk egy “l” betűt, amit aztán elrejtünk, így az elem sosem lesz üres. Chrome-ban a megoldás okozhat további fejfájást, így a fenti @-moz-document segítségével csak a Firefox böngészőket célozzuk meg. A legújabb FF-ben tesztelve.

Demo

A következő Pen-en megtudod nézni a fent említett dolgok nagy részét!

A kép cserélésért felelős részlet nem ehhez a témához tartozik, de ettől függetlenül érdekes lehet. A HTML5-ös File API használatát mutatja be. A következőkben készül majd egy cikk erről is!

See the Pen Editable User Card by Adam Laki (@adamlaki) on CodePen.

,