CSS: Fushat e redaktueshme

Autor: Skender Mustafi

Është gjë e zakonshme që fushat e formave të ndryshme (në html njihen si <form>, të cilat mund t’i shohim tek dërguesit e porosive ose tek formularët e ndryshëm, janë të redaktueshme. Pra, në to mund të vendosim emrin tonë, postën elektronike, porosinë e të tjera.  Me këtë artikull do të shpalosim mënyrën e tejkalimit të këtij kufizimi.

contentEditable=”true” është urdhëri i cili bën çdo kod fushë formues të jetë i hapur për të shkruar në të. Me këtë urdhër mund të bëni të mundur që në një tabelë të mund të shkruani ose në një fushë të një tabele. Në html5 dhe css3 është më praktike të shfrytëzohen ndarësit <div> në vend të tabelave gjë që nuk pengon aspak që urdhëri të integrohet në një <div> dhe ai të bëhet i redaktueshëm.

Në këtë shembull mund të shohim që fusha tek “Teksti juaj…” është e redaktueshme, pra “Teksti juaj…” mund të griset dhe të shkruhet një tekst sipas dëshirës. Vini Re: Urdhëri i mësipërm nuk mund të ekzekutohet nga ndonjë CSS dokument, por duhet vendosur në vetë fushën, pra për shembull në vetë <div> si: <div contentEditable=”rue”>…</div>

Për më tepër, tekstin e futur në fushë, shpesh herë në formë të ndonjë shpjegimi, mund të e bëjmë si përmbajtje “në hije” e cila humbet vetvetiu me të klikuar mbi fushë. Këtë mund të e realizojmë përmes aktivizimit të një funksioni të thjeshtë si:
<style>
content:attr(tekstineprapavi)
}
</style>


Pra, ky funskion konrollon çdo meta kod në dokument dhe aty ku contentEditable=true që nënkupton që aty ku fusha është e redaktueshme, aty të paraqitet përmbajtja e dëshiruar.  Kodi i më sipërm vendoset si <style> në kokë të dokumentit, kurse “tekstineprapavi” është pjesa e cila ngërthen në vete përmbajtjen. Kjo pjesë vendoset tek fusha e redaktueshme si: <div conentEditable=”true” tekstineprapavi=”Teksti juaj…”></div>. Në këtë rast pjesa mes hapjes dhe mbylljes së metakodit duhet të jetë e zbrazët si <div …></div>. Shembulli i mësipërm mund të zgjerohet më tej për të kuptuar funskionin.

Kuptohet që këto fusha pastaj mund të shfrytëzohen pë nevoja të ndryshme siç kam shfrytëzuar ato në artikujt si : Gjeneruesi i Modelit të Biznesit ose Matrica e Boston Consulting Group.

Suksese!