CrazyDog ~ Multi-blog

Pokročilé vkládání formátování do textarey

St, 1. srpen 2007, 19:11

V tomhle článku vás chci naučit vkládání formátovacích značek do textarey pomoci JavaScriptu, ať už jde o jednoduché smajlíky a [b], [i], [u], [s] či složitější [img] a [url].

Nejprve si ukážeme, jak by taková textarea měla vypadat aby s námi JavaSript spolupracoval.

<form method="post" id="vzkaz" action="">
<textarea rows="6" cols="55" name="zprava"></textarea>
</form>

Pokud jste s JavaScriptem nikdy nepracovali, tak se buď vkládá mezi tagy

<script type="text/javascript">Já jsem JavaScript</script>

který musí být vždy nad prováděnou operaci (v našem případě nad <form>), ale nesmí být mimo hlavní tagy <body> či <head> a nebo může být ve zvláštním souborů pojmenovaném například scripty.js, který se vkládá do:

<script type="text/javascript" src="/scripty.js"></script>

který má stejné podmínky jako předešlý způsob.

Vkládaní smajlíků

A nyní se naučíme vkládat smajlíky. Tlačítko pro vložení smajlíku bude vypadat například:

<img src="/smajlik1.gif" onclick="smajlik(':)')" alt=":)" />
<img src="/smajlik2.gif" onclick="smajlik(':(')" alt=":(" />
…

které bude nasledováno JavaSriptem:

function smajlik(smajlik) {
  document.forms.vzkaz.zprava.focus();
  document.forms.vzkaz.zprava.value=
  document.forms.vzkaz.zprava.value+smajlik
}

Jednoduché, že?

Vkládaní b, i, u, s…

A teď se vrhneme na složitější vkládání typu [b], [i], [s]… a tlačítka budou vypadat například takhle:

<img src="/b.gif" onclick="tagy('b','Tučný text')" alt="[b]" />
<img src="/i.gif" onclick="tagy('i','Kurzivý text')" alt="[i]" />
<img src="/s.gif" onclick="tagy('s','Přeškrtnutý text')" alt="[s]" />
…

které budou zase doprovázené JavaSriptem:

function tagy(type,info) {
  var nametag = window.prompt(info);
  if(nametag != '' && nametag != null) {
    document.forms.vzkaz.zprava.focus();
    document.forms.vzkaz.zprava.value=
    document.forms.vzkaz.zprava.value+'['+type+']'+nametag+'[/'+type+']'
  } else {
   if(nametag == '' || nametag == null) {window.alert('Nebyl napsán text');}
  }
}

Těžší, ale taky to jde zvládnout.

Vkládaní obrázků a adres

Poslední věc o které chci v tomhle článku napsat je vkládaní obrázků [img] a adres [url]. Tlačítka budou vypadat například:

<img src="/e.gif" onclick="adresa('url', 'Adresa i s http://', 'Název')" alt="[e]" />
<img src="/img.gif" onclick="adresa('img', 'Obrázek i s http://', 'Title')" alt="[img]" />

ke kterým přiřadíte JavaScript:

function adresa(type,info1,info2) {
  var adresa = window.prompt(info1,'http://');
  var nazev = window.prompt(info2);
  if(adresa != '' && adresa != null && adresa != 'http://' && nazev != '' && nazev != null) {
    document.forms.vzkaz.zprava.focus();
    document.forms.vzkaz.zprava.value=
    document.forms.vzkaz.zprava.value+'['+type+'='+adresa+']'+nazev+'[/'+type+']'
  } else {
    if(type == 'img') {window.alert('Špatný formát adresy nebo nebylo napsáno title');}
    if(type == 'url') {window.alert('Špatný formát adresy nebo nebyl napsán název');}
  }
}

A tím jsme u konce. Jak se s tím vypořádat pomoci PHP najdete v dalším článku. Náhled celého díla najdete zde.

≈

ø 3 (1351 hlasů) ≈ Návratnost

(Ledový text v Gimpu) « Starší článek | Novější článek » (Zajímavostí o kterých ...)

Související články

Hodnocení

Děkuji za hodnocení

Štítky: JavaScript, tutoriál, zobrazit všechny štítky
! Našli jste v článku gramatické či pravopisné chyby? Je to z důvodu autorovy nemoci zvané dysgrafie. Tudíž všem děkuji za pochopení a každý článek pokud možno nechávám projít korekturou. !

Zatím 14 komentářů

reaguj - #31dinkinve St, 1. srpen 2007, 19:32

mno teda bezva návod *3*

Firefox 1.0.6 / Windows XP

web - reaguj - #33kralikve St, 1. srpen 2007, 21:14

Chytrý ;)
{18} JJ to je :)

Firefox 2.0.0.6 / Windows XP

reaguj - #79lolv Út, 7. srpen 2007, 17:59

{16} lol

Firefox 2.0.0.6 / Windows XP

reaguj - #271leonv Út, 18. září 2007, 23:26

super *3*

Firefox 2.0.0.6 / Windows XP

reaguj - #434Cupv Po, 7. leden 2008, 18:41

*3* hledal jsem, až sem našel

Firefox 2.0.0.11 / Windows XP

reaguj - #567Smajdave St, 2. červenec 2008, 22:22

Hochu moc díky toto jsem hledal hledal nenacházel a u tebe jsem to našel fakt díky moc *1* bezva práce a propaguj to někde hodně lidí to hledá *15* *15*