Pokročilé vkládání formátování do textarey » JavaScripty » Blog » CrazyDog ~ Multi-blog

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

St, 1. srpen 2007, 19:11
Pokročilé vkládání formátování do textarey

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.

***** ø 2.9 (790 hlasů) ≈ Návratnost
(Ledový text v Gimpu) « Starší článek | Novější článek » (Zajímavostí o kterých ...)

Š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
avatar

mno teda bezva návod *3*

Firefox 1.0.6 / Windows XP
web - reaguj - #33kralikve St, 1. srpen 2007, 21:14
avatar

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

Firefox 2.0.0.6 / Windows XP
reaguj - #79lolv Út, 7. srpen 2007, 17:59
avatar

{16} lol

Firefox 2.0.0.6 / Windows XP
reaguj - #271leonv Út, 18. září 2007, 23:26
avatar

super*3*

Firefox 2.0.0.6 / Windows XP
reaguj - #434Cupv Po, 7. leden 2008, 18:41
avatar

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

Firefox 2.0.0.11 / Windows XP
reaguj - #567Smajdave St, 2. červenec 2008, 22:22
avatar

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*

*3**3**3*

Firefox 2.0.0.15 / Windows XP
reaguj - #589ondrej123v Po, 1. září 2008, 13:54
avatar

[h2]super![/h2]přesně to jsem hledal!*4**4* a stáhnout by se to nedalo? *5*

MSIE 7.0 / Windows XP
web - reaguj - #590CrazyDog mužv Po, 1. září 2008, 20:05
avatar

ondrej123: Co chceš na tom stahovat? Však si napíšeš svůj podle přání. Tohle jsou jen příklady, jak to má vypadat.

Firefox 3.0.1 / Windows XP
reaguj - #887DracoAnv So, 20. březen 2010, 11:09
avatar

Taky bych bral hotový kod.*18*

Firefox 3.6 / Windows 7
reaguj - #1061kordyve St, 8. červen 2011, 21:06
avatar

Díky, moc mi to pomohlo nikde sem to nenašel takhle krásně pohromadě ;)

Firefox 4.0 / Windows Vista
reaguj - #1208omc003 mužve St, 5. září 2012, 13:29
avatar

Díky za script! Jen malé upozornění: <img> je nepárový tag, tudíž by to ještě chtělo trošku poupravit.

Chrome 21.0.1180.89 / Windows 7
web - reaguj - #1209CrazyDog mužve Čt, 6. září 2012, 10:23
avatar

omc003: Ahoj, moc nechápu to poupravení.

Chrome 21.0.1180.89 / Windows 7
reaguj - #1219omc003 mužve St, 12. září 2012, 13:38
avatar

CrazyDog: Beru zpět. Jak se na to dívám zpětně, napsal jsem kravinu.

Chrome 21.0.1180.89 / Windows 7
web - reaguj - #1417Dominik mužv So, 9. listopad 2013, 10:17
avatar

Beru zpět. Jak se na to dívám zpětně, napsal jsem kravinu.

Firefox 25.0 / Windows 7
 
0/2000
Jméno*
Web
Email
Gravatar
avatar
  [f] [:)] [L] [XL] [XXL] | [b] [i] [s] [e] [*] [cite] [code] [kod] [h1] [h2] [abbr] [sup] [sub] |
 
nejoblíbenější články:
novinky na webu:
informace: