Náhled textu z textarey v reálném čase » JavaScripty » Blog » CrazyDog ~ Multi-blog

Náhled textu z textarey v reálném čase

St, 15. srpen 2007, 11:03
Náhled textu z textarey v reálném čase

Tento jednoduchý JavaScript vám dokáže zobrazit náhled textu i s formátováním, který pravě píšete do textarey v určeném divu a to v reálném čase.

Form bude vypadat úplně stejně jako při vkládání formátování akorát přidáme to texarey onkeyup, takže celý form a div ve kterém se bude zobrazovat náhled bude vypadat:

<form method="post" id="vzkaz" action="">
<textarea rows="6" cols="55" name="zprava" onkeyup="javascript:nahled();"></textarea>
</form>
<div id="nahled"></div>

A JavaScript, který nám zařídí náhled v reálném čase zase:

<script type="text/javascript">
function nahled() {
  var tmp = document.all.zprava.value
  while(tmp.indexOf('\n') > 0) tmp = tmp.replace("\n", "\<br /\>");
  /* Formátování */
  document.all.nahled.innerHTML = tmp;
}
</script>

Takhle by mohl vypadat celý script, ale jelikož do textarey píšeme i s formátováním, tak následující JavaScripty přijdou místo /* Formátování */. Jako první bych chtěl upozornit, že když vkládáte například smajlíka do textarey, tak v JavaScriptu musíte dat pod vložení do textarey nahled();, takže JavaScript pro vkládaní smajlíků, který je ve vkládání formátování bude vypadat následovně:

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

a takhle to bude vypadat i u dalších vkládání formátování. Je to k vůli tomu, že kdyby jste tak neučinili, tak by se vložil smajlík jen do textarey a v náhledů by se objevil, až by jste něco připsali do textarey.

A teď slibované formátování. Jako první budeme vkládat smajlíky, takže do JavaScriptu přidáme:

while(tmp.indexOf(":-)") > 0) tmp = tmp.replace(":-)", "\<img src=\"/1.gif\" />");
while(tmp.indexOf(":-(") > 0) tmp = tmp.replace(":-(", "\<img src=\"/2.gif\" />");
while(tmp.indexOf(":-D") > 0) tmp = tmp.replace(":-D", "\<img src=\"/4.gif\" />");
while(tmp.indexOf(";-)") > 0) tmp = tmp.replace(";-)", "\<img src=\"/5.gif\" />");
/* a další */

Další formátování bude tučný, kurzívý a přeškrtnutý text typu [b], [i] a [s]. Toto formátování bude vypadat následovně:

while(tmp.indexOf('[b]') > 0) tmp = tmp.replace("[b]", "\<b/\>");
while(tmp.indexOf('[/b]') > 0) tmp = tmp.replace("[/b]", "\</b/\>");
while(tmp.indexOf('[i]') > 0) tmp = tmp.replace("[i]", "\<i/\>");
while(tmp.indexOf('[/i]') > 0) tmp = tmp.replace("[/i]", "\</i/\>");
while(tmp.indexOf('[s]') > 0) tmp = tmp.replace("[s]", "\<s/\>");
while(tmp.indexOf('[/s]') > 0) tmp = tmp.replace("[/s]", "\</s/\>");

a další formátování podle vašeho uváženi. Tímto bych článek zakončil a náhled celého díla naleznete zde.

***** ø 3 (751 hlasů) ≈ Návratnost
(Stylování podle lang j...) « Starší článek | Novější článek » (PDA převládá nad Smart...)

Š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 26 komentářů

reaguj - #105Lolekve St, 15. srpen 2007, 22:13
avatar

Zaujimava vecicka :)

Firefox 2.0.0.6 / Windows XP
reaguj - #106Lolekve St, 15. srpen 2007, 22:14
avatar

Jeden dotaz chcel by poradit nejaku knihu alebo najlepsie stranku s tematikou na PHP crazydog nemozes mi poradit..

Firefox 2.0.0.6 / Windows XP
web - reaguj - #107CrazyDog mužve St, 15. srpen 2007, 23:05
avatar

Lolek: To ti asi nedokážu poradit, protože žádné weby o PHP nečtu a knihu… No nevím. Mám tady dvě a z ani jedné jsem se moc nenaučil. Spiš mě naučili různé příklady.

?
reaguj - #108Lolekve St, 15. srpen 2007, 23:40
avatar

{1} no ok dik i tak, j aj ja si myslim ze to z prikladov naucim najlahsie.

Firefox 2.0.0.6 / Windows XP
reaguj - #290ghgfv Ne, 7. říjen 2007, 20:45
avatar

lol

Opera 9.23 / Windows XP
web - reaguj - #291CrazyDog mužv Ne, 7. říjen 2007, 20:58
avatar

ghgf: lol? Proč? *12*

Firefox 2.0.0.6 / Ubuntu Linux
reaguj - #604Tomasv So, 18. říjen 2008, 10:52
avatar

Dobrý den,
nejsem expert na javascript, ale tento scriptík se mi líbí. Bohužel nefunguje na stráce s DOCTYPE XHTML 1.0 Strict, který používám. Přesně řečeno, nefunguje ten div nahledu. Třeba by to šlo nějak jednoduše opravit, ale opravdu JavaScript moc neumím. Děkuju. *1*

Firefox 3.0.3 / Ubuntu Linux
web - reaguj - #605CrazyDog mužv So, 18. říjen 2008, 14:35
avatar

Tomas: Hledal jsem na internetu a možná by ti pomohlo to trochu předělat. Já na to teď bohužel nemám čas, ale tohle by ti mohlo pomoct

Firefox 3.0.3 / Windows XP
reaguj - #606Tomasv So, 18. říjen 2008, 17:51
avatar

Děkuju za rychlou odpověd. Kdyby se mi to povedlo, tak to sem určitě dám. *1*

Firefox 3.0.3 / Ubuntu Linux
web - reaguj - #703Casperv Pá, 27. březen 2009, 20:33
avatar

Ahoj, pěkný script, také mi nefungoval, kvůli použití

var tmp = document.all.zprava.value
document.all.nahled.innerHTML = tmp; 
který jsem nahradil
var tmp=document.forms.vzkaz.zprava.value;
document.getElementById("nahled").innerHTML=tmp;
,pak vše fungovalo jak má. Ovšem potřeboval bych do automatického tvoření tagů přidat náhled odkazu, tzn. [url=xxx][/url], extra moc JS neovládám, takže nevím jak do vašeho zápisu vložit nějaký regulérní výraz aby xxx mohlo být cokoli, nenapadá vás řešení?

předem díky za odpověď

Firefox 3.0.7 / Windows XP
web - reaguj - #704CrazyDog mužv So, 28. březen 2009, 11:05
avatar

Casper: Za getElementById ti děkuji a z regulárními výrazy jsem si v JS ještě moc nehrál. Jen pár základních, ale tohle nevím. Zkus se podívat na Interval. Tam jsou nějaké příklady. Snad ti to pomůže.

Firefox 3.0.8 / Ubuntu Linux
web - reaguj - #910lopikv Po, 7. červen 2010, 16:53
avatar

Jen jeden dotaz. Co když nemám znaky v HTML, ale v BBCode?

Opera 9.80 / Windows 7
web - reaguj - #911CrazyDog mužv Po, 7. červen 2010, 21:36
avatar

{91} Však to jsou BBcode. Ale můžeš si tam vymyslet cokoliv.

Firefox 3.6.3 / Windows XP
web - reaguj - #912lopikve St, 9. červen 2010, 22:59
avatar

{1} Jo vlastně promiň, nevšiml jsem si toho posledního kousku kódu. Stejně mi není jasné jak to zkombinovat. To co jsem vytvořil já dle mne fungovat nebude. Vypadá takto:

<script type="text/javascript"> 
function nahled() { 
var tmp = document.all.zprava.value 
while(tmp.indexOf('') > 0) tmp = tmp.replace("", "<br />"); 
/* Formátování */ 
document.all.nahled.innerHTML = tmp; 
}
while(tmp.indexOf('[b]') > 0) tmp = tmp.replace("[b]", "<b/>"); 
while(tmp.indexOf('[/b]') > 0) tmp = tmp.replace("[/b]", "</b/>"); 
while(tmp.indexOf('[i]') > 0) tmp = tmp.replace("[i]", "<i/>"); 
while(tmp.indexOf('[/i]') > 0) tmp = tmp.replace("[/i]", "</i/>"); 
while(tmp.indexOf('[s]') > 0) tmp = tmp.replace("[s]", "<s/>"); 
while(tmp.indexOf('[/s]') > 0) tmp = tmp.replace("[/s]", "</s/>");
function smajlik(smajlik) { 
document.forms.vzkaz.zprava.focus(); 
document.forms.vzkaz.zprava.value= 
document.forms.vzkaz.zprava.value+smajlik 
nahled(); 
}
while(tmp.indexOf(":-)") > 0) tmp = tmp.replace(":-)", "<img src="/1.gif" />"); 
while(tmp.indexOf(":-(") > 0) tmp = tmp.replace(":-(", "<img src="/2.gif" />"); 
while(tmp.indexOf(":-D") > 0) tmp = tmp.replace(":-D", "<img src="/4.gif" />"); 
while(tmp.indexOf(";-)") > 0) tmp = tmp.replace(";-)", "<img src="/5.gif" />"); 
</script>

Opera 9.80 / Windows 7
web - reaguj - #913CrazyDog mužve Čt, 10. červen 2010, 21:50
avatar

{91} Zde máš náhled, tak se zkopíruj zdroják.

Firefox 3.6.3 / Windows XP
web - reaguj - #914lopikv So, 12. červen 2010, 11:39
avatar

{1} Teď mě tak napadlo nešlo by udělat aby byl náhled přímo v hlavním textarea, dle mě je to nepěkné psát text a vidět text pod textarea, mělo by to vypadat asi nějak takto <textarea><div id=„nahled“></div></textarea> nebo tak nějak jinak by to mělo asi vypadat, že? Teď jsem na to možná kápnul. Nestačilo by před textarea hodit div?

Opera 9.80 / Windows 7
web - reaguj - #915CrazyDog mužv So, 12. červen 2010, 21:13
avatar

{91} No comment

Firefox 3.6.3 / Windows XP
web - reaguj - #919lopikv Út, 6. červenec 2010, 09:27
avatar

{1} Můžeš prosím tě jen poradit co mám tady špatně?
Byl bych ti moc vděčný.

<script type="text/javascript" src="nahled.js"></script>
<div id="nahled"><textarea name="text" style="width:750px;height:550px;border:none;"readonly="readonly" onkeyup="javascript:nahled();"><?php include("inc/zmeny/jidelni_listek.txt") ?></textarea></div>

Opera 9.80 / Windows 7
web - reaguj - #920CrazyDog mužv Út, 6. červenec 2010, 13:35
avatar

{91} Asi ti nerozumím. To chceš v jednom textarea psát a druhém vidět kopii?

Firefox 3.6.6 / Windows XP
web - reaguj - #921lopikv Út, 6. červenec 2010, 19:13
avatar

{1} Ne. Prostě mám textarea pro text, a do textarea chci vkládat formátování. Vypadá to takhle: Ukázka textu v textarea

Opera 9.80 / Windows 7
web - reaguj - #922CrazyDog mužv Út, 6. červenec 2010, 22:13
avatar

{91} Jo takhle… Na tohle se nepoužívá textarea, ale iFrame.

Firefox 3.6.6 / Windows XP
web - reaguj - #923lopikve St, 7. červenec 2010, 14:15
avatar

{1} Aha, no a stejně to potřebuji vědět. Protože potřebuji i aby bylo vidět formátování textu zároveň v textarea při psaní v administraci. Nevím zda si to co jsem napsal pochopil, proto to napíšu po lopatě. Chtěl bych bylo vidět formátování textu, přímo v textarea.

Opera 9.80 / Windows 7
web - reaguj - #924CrazyDog mužve St, 7. červenec 2010, 20:14
avatar

{91} Tak tohle já nedokážu, na to už potřebuje JavaScript odborníka.

Firefox 3.6.6 / Windows XP
web - reaguj - #925lopikve Čt, 8. červenec 2010, 14:02
avatar

{1} A nevěděl by si prosím tě kde bych takového odborníka sehnal? Jo a mimochodem, v iFrame se mi taky nezobrazuje formátování textu. Nevíš čím to je? Použil jsem tento zápis, ale nejde, zápis jak kód vypadá napíšu teď:

<iframe src="inc/zmeny/jidelni_listek.txt" style="width:750;height:550;border:none;"></iframe>

Opera 9.80 / Windows 7
web - reaguj - #926CrazyDog mužv Pá, 9. červenec 2010, 10:14
avatar

{91} Odborníka neznám, ale to co ty potřebuješ, tak se nazývá WYSIWYG textarea. Příklad textarey
A proč ti v iframe nejde formátování? Protože formátování jde pouze v souborech HTML a ne TXT.

Firefox 3.6.6 / Windows XP
web - reaguj - #927lopikv Ne, 11. červenec 2010, 21:33
avatar

{1} To je zajímavé, když nemám soubor includovaný v iFrame tak to jde.

Opera 9.80 / 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: