Vkladanie smajlíkov do formuláru pomocou javascript-u
Vkladanie smajlíkov do formuláru pomocou javascript-u
Smajlíci patria do každej diskusie a nemôžu chýbať ani v komentároch k článkom.
Takisto sa dá povedať, že smajlíci sú veľmi obľúbení a určite ich väčšina ľudí
preferuje viac ako len obyčajný zápis typu :-) - čo znamená
úsmev.
Ako začneme?
Najprv sa uistíme, že na stránke vôbec máme niečo ako formulár( tag <form>). Ďalej zistíme, že tento formulár pracuje na to aby odosielal príspevky priamo do diskusii. Teraz predpokladám, že máte vybrané miesto.Zapisujeme JavaScript na stránku
Prvý JavaScript-ový kód budete musieť vložiť buď ako externý súbor alebo ho jednoducho necháte priamo na stránke. Ja mám radšej ten prvý spôsob a preto ho tak aj vykonáme. Vytvoríme si nový súbor napr. javascript.js. Do tohoto súboru budeme ukladať všetok javascript-ový kód aký nás napadne. Ako zahrnúť externý súbor na stránku niektorí z vás vedieť môžu a niektorí nie a preto uvádzam spôsob ako na to.<script src="javascript.js" type="text/javascript"></script>Tento kód musíte(v skutočnosti nemusíte ale podľa mňa je to tak prehľadnejšie) vložiť do hlavičky stránky, čiže do tagu <head>. Teraz prídem konečne k javascriptu. Najprv napíšem potom vysvetlím.
function add(data) { document.getElementById('prispevok').obsah.value = document.getElementById('prispevok').obsah.value + data + ""; }Podobne ako to poznáte s jazyka PHP aj v javascripte sa dajú funkcie vytvárať. Môžu mať aj svoj parameter - v našom prípade je to data. Najprv táto funkcia bude hľadať Element s id, ktoré obsahuje reťazec prispevok. Následne vyhľadá nejaké pole(v našom prípade textarea) kam bude vkladať smajlíkov. To sa bude volať obsah, čiže to bude meno tagu <textarea>. Hodnotu do formuláru budeme volať pomocou odkazu ako napr.
<a href="javascript:(':-)')" title=":-)">smajlík</a>
Ako vidíte hodnota podľa odkazu, ktorú sa pokúsime vložiť bude :-).
Hodnota sa pripočíta k obsahu formuláru. Čiže si všímame kód obsah.value + data.
Znamená to, že ak obsah má hodnotu povedzme "píšem príspevok" a použijeme
javascriptový odkaz, tak sa nám k obsah-u pridá text ":-)". Výsledok bude
vyzerať takto - "píšem príspevok:-)".
A čo HTML kód?
HTML kód bude teraz výstup, pomocou ktorého využijeme javascript. Ide v podstate len o príklad čiže obrázky smajlíkov si vložte do formláru podľa seba. Ja som odkázal na tie ktoré mám v redakčnom systéme implementované.
<form id="prispevok" action="" method="post">
<fieldset>
<legend>Formulár pre smajlíkov</legend>
<label for="autor">Autor</label>
<br /><input id="autor" name="autor" type="text" />
<br /><strong>Smajlíci</strong>
<br /><a href="javascript:add(':-)')" title="úsmev"><img
src="http://www.pabi3.com/layout/smiles/04.gif" alt=":-)" /></a>
<a
href="javascript:add(':-D')" title="veľký smiech"><img
src="http://www.pabi3.com/layout/smiles/03.gif" alt=":-D" /></a>
<a
href="javascript:add(':-(')" title="smútok"><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="Odoslať" />
<input type="reset"
value="Obnoviť pole" />
</fieldset>
</form>
Ak zahrniete javascriptový súbor k tomuto HTML kódu a kliknete na smajlíka určite
sa vloží do formuláru(konkrétne do tagu textarea). Jediné na čo už formulár čaká je opracovanie ale to už nieje
cieľom článku. Smajlík je vložený fo formuláru pomocou javascriptu a tým to končí :-).
Záver
Ako som už naznačil bude lepšie keď smajíka aj opracujete po odoslaní. Najlepšíe bude, ak napr. pomcou PHP budete v texte meniť reťazce ako :-) pomcou funkcie Str_Replace() na reťazce typu <img src="images/smiles/...To už ale v inom článku. Hotový príklad nájdete tu. Nebojte sa toho formuláru lebo je trochu naštýlovaný pomocou CSS aby lepšie vyzeral ;-).
Alternatívne verzie:
Autor: PaBi3 ·
Kategória: Programovanie ·
Dátum: 01.10.2005 17:48
Vyhľadávanie
Kategórie
Anketa
Používate nejaký PHP framework?
Celkový počet hlasov: 1055
Najnovšie komentáre
Staršie príspevky
Zaujímavé odkazy
W3C, XML
Komentáre
Čo sa týka názvu súboru je to naozaj výhodnejšie ale myslím, že je to vec každého z nás ako si to pomenuje. Väčšinou ide o to ako to vyhovuje vývojárovi [laugh].
Ja som v článku písal iba o tom ako ich vkladať po kliknutí na nich do <textarea>. Ja to mám urobené aj na tomto fóre, tak že pokiaľ nájde v <textarea> text :-) potom ho zmení na text <img src='obrazok.gif... a uloží ho do databázy. Na konci som sa zmienil o tom, že zobrazovať ich môžeme pomocou funkcie Str_Replace() v php po nájdení značky smajlíka v texte. Je to tiež jeden zo spôsobov ale ja som len uvádzal tip . Predsa to tak nemusí každý robiť. Ale myslím, že máš pravdu je to lepší spôsob zobrazovania [wink].
No každý to robíme po svém, ale o tom článek doopravdy není. To zkladní je popsáno a dobře srozumitelně, takže myslím, že opravdu pěkný článek.. ;-)
Je trochu rozdiel medzi fórom, ktoré sa robilo v seriály a mezdi týmto fórom. Toto je trochu iné fórum - "lepšie" [laugh].
No stačí trochu hľadať na internete funkcie ako Str_Replace() a pod. Ďalej sa treba naučiť sessions alebo cookies. Skôr by som odporúčal sessions [wink].
ved funguje aj toto:
<img style="cursor:hand" src="http://www.pabi3.com/layout/smiles/04.gif" alt=":-)" onclick="document.formular.obsah.value+=' :-) '" />
form treba priradit parameter name="formular"
Vo formulári totižto nemá čo hľadať atribút name.
Či to už človek urobí cez jednoduchú funkciu alebo cez škaredý dlhý zápis do validného XHTML kódu je predsa jedno... [shy]
mas celkom slusnu stranku ale nezavadzaj tu zbytocne ludi.
pozri si dokumentaciu k html tagom kdekolvek na nete
napr. na http://www.w3schools.com/tags/tag_form.asp.
igiho zapis je ovela jednoduhsi. milujem komplikatorov.
http://www.w3.org/TR/xhtml1/#h-4.10
Validátor mi v dobe písania článku vykazoval chybu pre tento zápis v jazyku [strong]XHTML 1.1[strong].