| Autor | Zpráva | ||
|---|---|---|---|
| Kry5 Profil |
#1 · Zasláno: 27. 10. 2010, 14:58:33 · Upravil/a: Kry5
Zdravím,
jsem v js začátečník a chtěl bych si udělat jednoduchou stránku, kde by uživatel psal do formuláře i s html značkami a v dolní části stránky by se mu text průběžne vypisoval. Zkoušel jsem to bez rámů nějak takhle: <script type="text/javascript">
function vzhled() {
document.writeln(document.forms[0].text.value);
setTimeout("vzhled()",500);
}
</script>
</head>
<body>
<h1>Interaktivní aplikování html značek</h1>
<p><b>Zde napište svůj článek:</b></p>
<form>
<textarea name="text" rows=5 cols=80></textarea><br>
<p class="poznamka">Můžete používat HTML značky. Dole na stránce se vám bude průběžně zobrazovat jak přibližně bude článek vypadat na Vašem webu</p>
<hr>
<br>
<p><b>Nějak takto bude Váš článek vypadat na webu:</b></p>
<table>
<tr><td onload="vzhled()"></td></tr>
</table>
</body>
</html>Nevíte v čem může být chyba? Nic se bohužel nikam nevypisuje. Děkuji za odpovědi. A ještě jsem se chtěl zeptat jak často jsou používané rámce? Všiml jsem si jich třeba na seznam email, ale jinde nevím. |
||
| _es Profil |
#2 · Zasláno: 27. 10. 2010, 15:24:56
|
||
| Kry5 Profil |
#3 · Zasláno: 27. 10. 2010, 17:14:59
Opravil jsem to bohužel pořád nefunguje:
<script type="text/javascript">
function vzhled() {
document.vypis.vypistext.value = "document.zadani.text.value";
setTimeout("vzhled()",500);
}
</script>
</head>
<body onload="vzhled()">
<h1>Interaktivní aplikování html značek</h1>
<p><b>Zde napište svůj článek:</b></p>
<form name="zadani">
<textarea name="text" rows=5 cols=80></textarea><br>
<p class="poznamka">Můžete používat HTML značky. Dole na stránce se vám bude průběžně zobrazovat jak přibližně bude článek vypadat na Vašem webu</p>
<hr>
<br>
<p><b>Nějak takto bude Váš článek vypadat na webu:</b></p>
<form name="vypis">
<textarea name="vypistext" class="vypis" rows=15 cols=100 value="" disabled></textarea>
</form>
</body>
</html> |
||
| Witiko Profil |
#4 · Zasláno: 27. 10. 2010, 17:22:15 · Upravil/a: Witiko
Kry5:
document.vypis.vypistext.value = "document.zadani.text.value"; Třeba protože do textarea vypisuješ text "document.zadani.text.value"? Co to zkusit takhle: document.vypis.vypistext.value += document.zadani.text.value; += způsobí, že se původní hodnota nepřepíše, ale přidává se k ní. Ke způsobu definice setTimeout dvě věci: 1) Definice funkce provedené setTimeoutem pomocí řetězce není žádoucí. Proč to není žádoucí? Javascriptový interpret si musí přeformovat text na funkci, což způsobí vytvoření zbytečné anonymní funkce navíc a stejně tak to znamená práci navíc pro interpreta: setTimeout("vzhled()",500);
se musí přeinterpretovat na
setTimeout(function() {vzhled();},500);Oč hezčí je předat rovnou referenci na funkci: setTimeout(vzhled,500);
nebo v případě, že potřebujeme funkci předat atributy:
setTimeout(function() {vzhled(atribut1, atribut2);},500);2) V tomto případě je použití setTimeout zcela nevhodné, když už, tak jen proto, že intervaly nebudou přesné. (Proč nebudou přesné). Místo toho je lepší použít setInterval. Tzn.: <body onload="setInterval(vzhled, 500);"> |
||
| Kry5 Profil |
#5 · Zasláno: 27. 10. 2010, 17:30:25
Díky moc a omluv mojí neschopnost, ale pořád je asi něco špatně :-(
<script type="text/javascript">
function vzhled() {
document.vypis.vypistext.value += document.zadani.text.value;
}
</script>
</head>
<body onload="setInterval(vzhled, 500);">
<h1>Interaktivní aplikování html značek</h1>
<p><b>Zde napište svůj článek:</b></p>
<form name="zadani">
<textarea name="text" rows=5 cols=80></textarea><br>
<p class="poznamka">Můžete používat HTML značky. Dole na stránce se vám bude průběžně zobrazovat jak přibližně bude článek vypadat na Vašem webu</p>
<hr>
<br>
<p><b>Nějak takto bude Váš článek vypadat na webu:</b></p>
<form name="vypis">
<textarea name="vypistext" class="vypis" rows=15 cols=100 value="" disabled></textarea>
</form>
</body>
</html>
A pak jsem se ještě chtěl zeptat: Když uživatel napíše nahoře např: <b>textext</b> Vypíše se mu nejspíše do dolního okna to samé. Nebo se pletu? Pokud ne jak by šlo docílit toho aby se HTML značky nezobrazovali, ale vykonala se jejich funkce. Díky moc |
||
| Witiko Profil |
#6 · Zasláno: 27. 10. 2010, 19:50:25 · Upravil/a: Witiko
Nebude to náhodou tím, že vnořuješ dva formuláře do sebe a druhý z nich nemáš uzavřený? Stejně není důvod mít dva btw:
document.zadani.vypistext.value = document.zadani.text.value; Jinak proč ničit prohlížeč uživatele neustálým obnovováním, když stačí náhled měnit při změně?
function vzhled(zadani) {
document.zadani.vypistext.value = zadani.value;
}
...
<textarea onchange="vzhled(this)" rows=5 cols=80></textarea>Jinak textarea zobrazuje čirý text, pokud chceš zobrazovat HTML, musíš ho vepisovat do toku dokumentu. Tedy:
var objekt;
function vzhled(zadani) {
if(objekt) objekt.innerHTML = zadani.value;
}
<body onload="objekt = document.getElementById('vypistext');">
...
<div id="vypistext" style="width:500px; height:200px;"></div>
Celkově něco takového: <html>
<head>
<script type="text/javascript">
var objekt;
function vzhled(zadani) {
if(objekt) objekt.innerHTML = zadani.value;
}
</script>
</head>
<body onload="objekt = document.getElementById('vypistext');">
<h1>Interaktivní aplikování html značek</h1>
<p><b>Zde napište svůj článek:</b></p>
<textarea onkeyup="vzhled(this);" rows="5" cols="80"></textarea><br>
<p class="poznamka">Můžete používat HTML značky. Dole na stránce se vám bude průběžně zobrazovat jak přibližně bude článek vypadat na Vašem webu</p>
<hr>
<br>
<p><b>Nějak takto bude Váš článek vypadat na webu:</b></p>
<div class="vypis" id="vypistext" style="width:500px; height:200px;"></div>
</body>
</html> |
||
| Kry5 Profil |
#7 · Zasláno: 27. 10. 2010, 20:24:29
Díky moc to jsem potřeboval!!!
|
||
| Kry5 Profil |
#8 · Zasláno: 27. 10. 2010, 20:37:57 · Upravil/a: Kry5
Ještě jedna malá prosba. Mohl by mi někdo, prosím, naznačit jak udělat zalamování řádků? Nějakou podmínkou na délku? Jde o to, že v tomto kódu pokud je řádek delší než okno tak přesahuje. Díky moc
A ještě jak zachovat odentrování v tomto skriptíku. Někdo jsem to vyděl ale nemůžu to najít... Momentálně mi odentrování funguje pokud je řádek delší než těch 600px (nastavená width) |
||
| Kry5 Profil |
#9 · Zasláno: 27. 10. 2010, 21:09:58
Pak je tu ještě problém s tím, že Witikem uvedený script nefunguje v Internet Explorer 8 (Chrome, Opera, Firefox jsou v pohodě). Fakt sory, že takhle otravuju, ale ještě nemám s js zkušenosti :-(
|
||
| Witiko Profil |
#10 · Zasláno: 27. 10. 2010, 22:53:26 · Upravil/a: Witiko
Mnou uvedený script tak, jak jsem ho uvedl, v Internet Explorer 8 funguje. Pokud tobě ne, možná by stálo za to stisknout F11 a podívat se do konzole, co prohlížeči vadí.
Zalamování řádků v elementu je věc css, najdi si něco o vlastnosti word-wrap. Odcentrování čeho, jaké, vertikální / horizontální? „Fakt sory, že takhle otravuju, ale ještě nemám s js zkušenosti :-(“ A tím, že nás za tebe necháš všechno udělat je nezískáš. |
||
| Kry5 Profil |
#11 · Zasláno: 28. 10. 2010, 08:22:17 · Upravil/a: Kry5
Už funguje. Musel jsem povolit ActiveX (proč?)
Odentrování (zmáčknout enter). Asi by se měl automaticky dodat <br> Ani jsem ten word-wrap nepotřeboval stejně je jen pro ie tohle je vyřešeno. |
||
| Witiko Profil |
#12 · Zasláno: 28. 10. 2010, 09:53:55
Kry5:
„Už funguje. Musel jsem povolit ActiveX (proč?)“ Nemám tušení, nesedím za tvým počítačem. „Ani jsem ten word-wrap nepotřeboval stejně je jen pro ie tohle je vyřešeno.“ Promiň, ale word-wrap css vlastnost není jen pro IE a bez ní se ti test v náhledu zalamovat / odenterovávat nebude. |
||
| Kry5 Profil |
#13 · Zasláno: 28. 10. 2010, 18:18:29
Vím jak funguje word-wrap: zalamuje dlouhý slova i v jejich průběhu, ale mě jde o to, když někdo napíše do formuláře řádek s jednim slovem a pak dá enter na další tak dole se to zobrazí jako jeden řádek pořád. Já potřebuju aby se to taky zobrazilo jako dalí řádek.
Zkusil jsem něco takovýho: <body onload="objekt = document.getElementById('vypistext');">
<h1>Nový článek</h1>
<p><b>Zde napište svůj článek:</b></p>
<form>
<a href="#" onClick="replacesingle('b')"><img src="bold.gif"></a>
<a href="#" onClick="replacesingle('i')"><img src="italic.gif"></a>
</form>
<textarea onkeydown = "enter();" onkeyup="vzhled(this);" rows="10" cols="50" name="bodytxt2"></textarea><br>
<hr>
<br>
<p><b>Nějak takto bude Váš článek vypadat na webu:</b></p>
<div class="vypis" id="vypistext"></div> function enter() {
if(event.keycode == 13) {
if (objekt) objekt.innerHTML = "<br>";
}
}Bohužel nefunguje |
||
| Witiko Profil |
#14 · Zasláno: 28. 10. 2010, 22:07:43 · Upravil/a: Witiko
Zaprvé je nutné předat event, zadruhé chceš <br> přidat, ne jím nahradit celý obsah elementu, tedy:
onkeydown="enter(event);"
function enter(evt) {
if(!evt) evt = window.event;
if(evt.keycode == 13) {
if(objekt) objekt.innerHTML += "<br>";
}
}
Kde se ve funkci onkeydown vzala proměnná event? Je dobré přemýšlet o všech funkcích, které objekt event předávají nějak takto: document.body.onkeydown = function(event) {
enter(event);
}
případně
document.body.onkeydown = function() {
enter(arguments[0]);
}Objekt event se vždy předá jako první argument funkce, pokud konstrukci funkce takto neovlivňujeme, vytvoří se funkce s atributem jménem event. U Internet Exploreru to funguje trochu jinak, tzn. vytvoří se pseudoglobální proměnná event přístupná pro danou funkci a všechny její podscope, proto tento řádek: if(!evt) evt = window.event; Jinak co se řešení týče - nepřijde ti mírně nedomyšlené? Jak pak bude uživatel odřádkování zpětně mazat? |
||
| Chamurappi Profil |
#15 · Zasláno: 28. 10. 2010, 23:08:39
Reaguji na Kry5:
„Už funguje. Musel jsem povolit ActiveX (proč?)“ Nemusel. Jestli tím myslíš hlášku o „aktivním obsahu“, která se ukazuje při prohlížení jakýchkoliv stránek s JS na disku (tedy ne z webu), tak tu jde snadno vypnout, hledej. Reaguji na Witika: „Pokud tobě ne, možná by stálo za to stisknout F11 a podívat se do konzole“ Raději F12. „proto tento řádek“ V prvním z uvedených kódů není potřeba, protože tam předáváš v ovladači zapsaném v atributu proměnnou jménem event jako argument a rozdíl v její působnosti se setře.
|
||
| Witiko Profil |
#16 · Zasláno: 28. 10. 2010, 23:35:20
Chamurappi:
„V prvním z uvedených kódů není potřeba, protože tam předáváš v ovladači zapsaném v atributu proměnnou jménem event jako argument a rozdíl v její působnosti se setře.“ Pravda, nepřečetl jsem si to po sobě. :) |
||
| Kry5 Profil |
#17 · Zasláno: 29. 10. 2010, 09:54:18
Díky upravil jsem to a pochopil ten základní kód, ale bohužel mi to přoád nefunguje :-(.
<script type="text/javascript">
var objekt;
function enter(evt) {
if(!evt) evt = window.event;
if(evt.keycode == 13) {
if(objekt) objekt.innerHTML += "<br>";
}
}
function vzhled(zadani) {
if(objekt) objekt.innerHTML = zadani.value;
}
function replacesingle(dowhat){
var SelectedString = document.selection.createRange().text;
if (SelectedString.length>0) {
var ReplaceString = "<"+dowhat+">"+SelectedString+"</"+dowhat+">";
document.selection.createRange().text = ReplaceString;
}
else {
alert("Nejprve vyberte část textu");
}
}
</script>
</head>
<body onload="objekt = document.getElementById('vypistext');">
<h1>Nový článek</h1>
<p><b>Zde napište svůj článek:</b></p>
<form>
<a href="#" onClick="replacesingle('b')"><img src="bold.gif"></a>
<a href="#" onClick="replacesingle('i')"><img src="italic.gif"></a>
</form>
<textarea onkeydown="enter(event);" onkeyup="vzhled(this);" rows="10" cols="50" name="bodytxt2"></textarea><br>
<hr>
<br>
<p><b>Nějak takto bude Váš článek vypadat na webu:</b></p>
<div class="vypis" id="vypistext"></div>
</body>
</html>Nevíte v čem by mohla být chyba? A ještě pak je tu jeden problém: zkoušel jsem doplnit nad horní textareu taková ty tlačítka, která doplní do text <b> </b> (kolem začerněného textu). Ale také asi bude někde chyba. Fakt díky moc. |
||
| Witiko Profil |
#18 · Zasláno: 29. 10. 2010, 10:54:34 · Upravil/a: Witiko
Kry5:
Je čas začít se naučit pracovat s konzolí Javascriptu, vypisuje ti přímo řádek i důvod chyby. F12 v MSIE, Ctrl + Shift + J v Chrome. |
||
| Kry5 Profil |
#19 · Zasláno: 29. 10. 2010, 11:07:24 · Upravil/a: Kry5
Zkoušel jsem to v Chrome, který použvíám a dal jsem si tam Console All(Errors,Warnings,Logs), ale nikde nic neni. Nic tam neni napsaný.
|
||
| Kry5 Profil |
#20 · Zasláno: 31. 10. 2010, 14:02:42
Prosím můžu poprosit ještě o odpověď?
Navíc ještě na skriptu víše můžete vidět můj pokus o vkládání html značek do formuláře nahoře. Ale nefunguje to. Netušíte v čem by mohla být chyba? Díky moc. |
||
| Kry5 Profil |
#21 · Zasláno: 31. 10. 2010, 19:03:46
Potřebuju to ještě do jednoho skriptu:
<body onload="poziceUkol(); vypisukol = document.getElementById('ukoly');" onkeydown="sipky(event);"> function sipky(evt) {
if(!evt) var evt = window.event;
var vlevo = 37;
var nahoru = 38;
var vpravo = 39;
var dolu = 40;
if (evt.keycode == vlevo) {
vlevo();
}
else if (evt.keycode == nahoru) {
nahoru();
}
else if (evt.keycode == vpravo) {
vpravo();
}
else if (evt.keycode == dolu) {
dolu();
}
}Zkoušel jsem to zadávat přes proměnný ty číslo do podmínek. Nefunguje stejně. |
||
| Witiko Profil |
#22 · Zasláno: 31. 10. 2010, 21:53:39
Kry5:
„Nefunguje stejně“ Nebude to tím, že se snažíš spustit číslo? „var vlevo = 37;“ „vlevo();“ ... |
||
| Kry5 Profil |
#23 · Zasláno: 31. 10. 2010, 21:59:47
Mám funkci vlevo() vadí stejný názvy? Nešlo mi to ani když jsem proměnnou neměll a v podmínce bylo např.
evt.keycode == 37 |
||
| Witiko Profil |
#24 · Zasláno: 31. 10. 2010, 22:30:06
Stejné názvy vadí, privátní proměnná přepíše globální funkci, alespoň uvnitř svého scope.
var a = 1;
function() {
var a = 2;
alert(a); // 2
}
alert(a); // 1 |
||
|
Časová prodleva: 13 let
|
|||
0