The article Vkladanie smajlikov do formularu pomocou javascript-u is written by PaBi3
Smajlici patria do kazdej diskusie a nemozu chybat ani v komentaroch k clankom. Takisto sa da povedat, ze smajlici su velmi oblubeni a urcite ich vacsina ludi preferuje viac ako len obycajny zapis typu :-) - co znamena usmev.
Ako zacneme? Najprv sa uistime, ze na stranke vobec mame nieco ako formular( tag <form>). Dalej zistime, ze tento formular pracuje na to aby odosielal prispevky priamo do diskusii. Teraz predpokladam, ze mate vybrane miesto. Zapisujeme JavaScript na stranku Prvy JavaScript-ovy kod budete musiet vlozit bud ako externy subor alebo ho jednoducho nechate priamo na stranke. Ja mam radsej ten prvy sposob a preto ho tak aj vykoname. Vytvorime si novy subor napr. javascript.js. Do tohoto suboru budeme ukladat vsetok javascript-ovy kod aky nas napadne. Ako zahrnut externy subor na stranku niektori z vas vediet mozu a niektori nie a preto uvadzam sposob ako na to. <script src="javascript.js" type="text/javascript"></script> Tento kod musite(v skutocnosti nemusite ale podla mna je to tak prehladnejsie) vlozit do hlavicky stranky, cize do tagu <head>. Teraz pridem konecne k javascriptu. Najprv napisem potom vysvetlim. function add(data) { document.getElementById('prispevok').obsah.value = document.getElementById('prispevok').obsah.value + data + ""; } Podobne ako to poznate s jazyka PHP aj v javascripte sa daju funkcie vytvarat. Mozu mat aj svoj parameter - v nasom pripade je to data. Najprv tato funkcia bude hladat Element s id, ktore obsahuje retazec prispevok. Nasledne vyhlada nejake pole(v nasom pripade textarea) kam bude vkladat smajlikov. To sa bude volat obsah, cize to bude meno tagu <textarea>. Hodnotu do formularu budeme volat pomocou odkazu ako napr. <a href="javascript:(':-)')" title=":-)">smajlik</a> Ako vidite hodnota podla odkazu, ktoru sa pokusime vlozit bude :-). Hodnota sa pripocita k obsahu formularu. Cize si vsimame kod obsah.value + data. Znamena to, ze ak obsah ma hodnotu povedzme "pisem prispevok" a pouzijeme javascriptovy odkaz, tak sa nam k obsah-u prida text ":-)". Vysledok bude vyzerat takto - "pisem prispevok:-)". A co HTML kod? HTML kod bude teraz vystup, pomocou ktoreho vyuzijeme javascript. Ide v podstate len o priklad cize obrazky smajlikov si vlozte do formlaru podla seba. Ja som odkazal na tie ktore mam v redakcnom systeme implementovane. <form id="prispevok" action="" method="post"> <fieldset> <legend>Formular pre smajlikov</legend> <label for="autor">Autor</label> <br /><input id="autor" name="autor" type="text" /> <br /><strong>Smajlici</strong> <br /><a href="javascript:add(':-)')" title="usmev"><img src="http://www.pabi3.com/layout/smiles/04.gif" alt=":-)" /></a> <a href="javascript:add(':-D')" title="velky smiech"><img src="http://www.pabi3.com/layout/smiles/03.gif" alt=":-D" /></a> <a href="javascript:add(':-(')" title="smutok"><img src="http://www.pabi3.com/layout/smiles/12.gif" alt=":-(" /></a> <br /><label for="obsah">Obsah</label> <br /><textarea id="obsah" name="obsah"></textarea> <br /><input name="odoslat" type="submit" value="Odoslat" /> <input type="reset" value="Obnovit pole" /> </fieldset> </form> Ak zahrniete javascriptovy subor k tomuto HTML kodu a kliknete na smajlika urcite sa vlozi do formularu(konkretne do tagu textarea). Jedine na co uz formular caka je opracovanie ale to uz nieje cielom clanku. Smajlik je vlozeny fo formularu pomocou javascriptu a tym to konci :-). Zaver Ako som uz naznacil bude lepsie ked smajika aj opracujete po odoslani. Najlepsie bude, ak napr. pomcou PHP budete v texte menit retazce ako :-) pomcou funkcie Str_Replace() na retazce typu <img src="images/smiles/... To uz ale v inom clanku. Hotovy priklad najdete tu. Nebojte sa toho formularu lebo je trochu nastylovany pomocou CSS aby lepsie vyzeral ;-).
Vkladanie smajlíkov do formuláru pomocou javascript-u Návrat

Vkladanie smajlíkov do formuláru pomocou javascript-u