# text input per javascript in textarea !



## mexximillian (29. Dezember 2003)

Hi zusammen,

Ich hab ein Problem....Ich möchte per Mousover über eine kleine grafik ,einen text aus einer auf dem server befindlichen textdatei in eine tabelle (bzw. formfield, textarea) laden. Dieser Text soll bei Mousout auch wieder verschwinden. Jetzt habe ich leide sehr wenig ahnung von Javascript, habe das ganze bis jetzt nur mit hilfe eines pop-ups gelöst.....aber wie bekomme ich diesen text in das aktive fenster ? bzw. in meine table ?

Für Hilfe wär ich sehr dankbar


----------



## mexximillian (29. Dezember 2003)

...........da fällt mir ein, gibt es eventuell die möglichkeit per mouseover ein php include zu starten, das bei mouseout  wieder verschwindet, oder ein neues include startet ? das wär vielleicht die beste möglichkeit, aber vielleicht stoße ich da ja auch schon an die grenzen von javascript ?


----------



## SilentWarrior (29. Dezember 2003)

PHP agiert serverseitig, du müsstest also wenn überhaupt die ganze Seite neu laden.

Das ist allerdings gar nicht nötig. Sieh dir einfach mal die Funktionen innerText und innerHTML etwas näher an.


----------



## Thomas Lindner (29. Dezember 2003)

Lese den Inhalt bereits vorab aus der DB und setze seine Eigenschaft per display : none (im Div Container z.B.) auf sicht bar und per MouseOver lösst du dann ein Wechsel zu display : block aus.


----------



## mexximillian (29. Dezember 2003)

*das ich da nich selbst drauf gekommen bin...*

Hi nochmal,

Danke für die schnellen Antworten.....ich denke ich wähle die JS lösung.....nur eine frage noch, wie geb ich dem script jetzt den Mouseover Befehl ? Ich hab mal des testscript von selfhtml da.....was muss ich da jetzt noch veränden ?


```
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var Neu = "neuer <b>fetter<\/b> Text";
function Aendern() { document.all.meinAbsatz.innerHTML = Neu; }
//-->
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<a href="javascript:Aendern()">Anderer Text</a>
</body>
</html>
```


----------



## Thomas Lindner (29. Dezember 2003)

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Unbenannt</title>
</head>
<body>
<a href="#" onmouseover="document.getElementById('textblock').style.display='block';" onmouseout="document.getElementById('textblock').style.display='none';">Testlink</a>
<div id=textblock style="display:none">Text der aus der Datenbank kommt</div>
</body>
</html>
```


----------



## Fabian H (29. Dezember 2003)

Das Problem wird sein, dass du den Text vom Server ja irgendwie in dein 
JavaScript unterbringen musst.

Denn so (angenommen, du nutzt PHP):

```
var sText = "<?php echo $sData; ?>";
```
Scheitert es, wenn der Text Zeilenumbrüche enthält, weil JavaScript diese 
innerhalb von Quotes nicht akzeptiert.

Eine Möglichkeit:
Den Text gleich von vornerein in eine nicht sichtbare Textarea schreiben und ihn 
daraus per JavaScript auslesen. Da hast du dann den Vorteil, dass du in der 
Textarea mehrzeiligen Text einfügen kannst, ihn aber ohne Probleme wieder mit 
JavaScript weiterverarbeiten kannst.

Ein konkretes Beispiel:

```
var sTmpMem;
function swapText( a_bMode )
{
    if ( a_nMode === true ) {
        sTmpMem = window.document['oTextForm']['oTextForm'].value;
        window.document['oTextForm']['oNewText'].value
            = window.document['oTextForm']['oFetchText'].value;
    } else {
        window.document['oTextForm']['oNewText'].value = sTmpMem;
        sTmpMem = "";
    }
}

<form name="oTextForm" action="lala.html">
    <textarea style="display:none;" name="oFetchText"><?php
        echo htmlentities($sData); ?></textarea>
    <textarea style="width:400px;height:200px;" name="oNewText"></textarea>
</form>

<a href="wohinduwillst.html" onMouseOver="swapText( true );"
   onMouseOut="swapText( false );">Klick</a>
```
ungetestet, abwer ich hoffe, du verstehst, was ich meine.


Edit: da war wohl jemand schneller


----------



## mexximillian (29. Dezember 2003)

*DANKE !*

Danke nochmal für die mühe....ich werds ausprobieren....Aber nehemen wir doch mal an, ich hab ein .txt file, und will nur dieses file einfach in ne table includen....gibts da nich ne einfachere methode ? 

Das habe ich noch gefunden.....aber funktionieren tuts bei mir nicht.......


hier


----------



## Fabian H (29. Dezember 2003)

Was verstehst du unter "einfacherer Methode"?
Gut, zugegeben ist es nicht gerade schönster Stil, den Text in eine textarea zu 
schreiben und diese dann unsichtbar zu machen, um später den Inhalt daraus 
auszulesen.

Aber die Methode ist eine einfache Lösung 

Du kannst natürlich das gleiche Spielchen machen, nur halt nicht den 
ausgelsenen Text in eine Textarea zu schreiben, sondern in einer Tabellen-Zelle:
Guck dir dazu mal, wie schon gesagt wurde,  _innerHTML_ an!

```
window.document.getElementById("oToChange").innerHTML = sDaRealValue;

[...]

<td id="oToChange">Hier erscheint später ein Text...</td>
```


----------



## mexximillian (29. Dezember 2003)

*.....*

Und nochmal Danke  

man man man, hier wird einem echt geholfen......aber die fragen gehen mir trotzdem nicht aus  

So wie ich das verstanden habe funktioniert die funktion 

```
document.all.meinAbsatz.innerHTML
```

in Mozilla nicht. Wie muss man Sie nun abgleichen, um sie für alle Browser conform zu machen ?

PS: Du hast recht, die lösung war einfach...sitze wohl nur schon zu lange vorm PC heut


----------



## mexximillian (29. Dezember 2003)

Danke nochmal an alle.....ICH HABS BEGRIFFEN    

Das kommt davon, wenn man das wesentliche vor lauter rumdenken nich mehr  erkennt  

Jetzt klappts auf jedenfall, bis zum nächsten mal *g


----------



## Fabian H (29. Dezember 2003)

Jap, das _all_-Objekt des _document_ Objektes ist zum Glück IE only.

Umgehen kann man es, wie schon oben beschrieben, z.B. mit _getElementById_ und anderen DOM Funktionen.


----------



## mexximillian (30. Dezember 2003)

*Schönheitsfrage =)*

Jetzt hab ich doch noch mal ne frage...ich benutze jetzt folgenden code...


```
<a href="#" onmouseover="document.getElementById('box1').style.display='block';"
   onmouseout="document.getElementById('box1').style.display='none';">Testlink</a>

<a href="#" onmouseover="document.getElementById('box2').style.display='block';"
   onmouseout="document.getElementById('box2').style.display='none';">Testlink</a>

<div id=box1 style="display:none">erster text</div>
<div id=box2 style="display:none">zweiter text</div>
```

Schöner wärs jetzt natürlich noch, wenn die table, in die der text reingeschrieben wird nicht leer steht, so lange keiner den mouseover-effekt benutzt  

Gibts da vielleicht noch ne möglichkeit, das man nen text reinschreibt, der dann vom <div> einfach überschrieben wird ? hab mich schon rumprobiert, aber nix hinbekommen...

greetz max


----------



## SilentWarrior (30. Dezember 2003)

Meinst du sowas?
	
	
	



```
<a href="#" onmouseover="document.getElementById('box1').innerText='dritter text';"
onmouseout="document.getElementById('box1').innerText='erster text';">Testlink</a>

<a href="#" onmouseover="document.getElementById('box2').innerText='vierter text';"
onmouseout="document.getElementById('box2').innerText='zweiter text';">Testlink</a>

<div id="box1">erster text</div>
<div id="box2">zweiter text</div>
```


----------



## mexximillian (30. Dezember 2003)

ich denke nicht, nehmen wir mal an, ich habe jetzt 50 verschiedene texte, die ich übers <div> per mouseover in die table schreiben will, wird der source ja ziemlich lang......

ich hatte eher an sowas wie eine überlagerung des textes gedacht, sobald man den mouseover effekt auslöst, wird der statische text vom <div> übelagert....

ich denke das sollte doch mit JS möglich sein  

PS: deine lösung probier ich trotzdem schnell mal aus  

greetz


----------



## mexximillian (30. Dezember 2003)

ich habs jetzt mal probiert......funktioniert leider nicht.....

greetz max


----------



## Fabian H (30. Dezember 2003)

Ich hab mal in deine Codezeilen einen Zeilenumbruch reingemacht, damit man 
nicht so viel vertikal scrollen muss.

Zum Thema:
Attribute von HTML-Tags gehören in Quotes.
_id=box1_ ist falsch, richtig: _id="box1"_

Mal ein kleines Beispiel:

```
var aOldData = new Array();

function toggleText( a_sId, a_bMode, a_sNewText = "" )
{
    if ( a_bMode == true ) {
        if ( aOldData[a_sId] == undefined ) {
            aOldData[a_sId] = window.document.getElementById(a_sId).innerHTML;
        }
        window.document.getElementById(a_sId).innerHTML = a_sNewText;
    } else {
        if ( aOldData[a_sId] != undefined ) {
            window.document.getElementById(a_sId).innerHTML = aOldData[a_sId];
        }
    }
}

[...]

<a href="lala.html" onMouseOver="toggleText( 'oText1', true, 'lala, neuer Text' );"
   onMouseOut="toggleText( 'oText1', false );">

<br>
<br>
<div id="oText1">Alter Text</div>
```

Zuerst wird der alte Inhalt in ein globals Array gespeichert und der Text dann 
geändert.
Wenn der Modus wieder false ist, wird der alte Text aus dem Array wieder 
herausgeholt und in das Element mit der übergebenen ID geschrieben.


----------



## mexximillian (30. Dezember 2003)

Danke für die Mühe, ich habs jetzt gelöst...zwar nicht sonderlich schick  
aber erfüllt seinen zweck....Ich hab der table ne Hintergrundgrafik verpasst, in die 
ich den Text geschrieben hab, die wird vom <div>, das die selbe background-color hat vollkommen überlagert  

danke nochmal 
greetz max


----------



## Fabian H (30. Dezember 2003)

> .Ich hab der table ne Hintergrundgrafik verpasst, in die
> ich den Text geschrieben hab, die wird vom <div>, das die selbe background-color hat vollkommen überlagert


Nicht sonderlich schick ist echt noch nett ausgedrückt...

Aber egal, deine Sache


----------



## mexximillian (30. Dezember 2003)

> Nicht sonderlich schick ist echt noch nett ausgedrückt...



Keine Angst   Ich werd das schon ändern, soll ja nur vorübergehend sein....ich hab nur grad keine Zeit, 
des ding muss fertich werden. Ich hab mir eure codes schon kopiert, und werd mich demnächst "mal ernsthaft" damit beschäftigen...

Guten Rutsch   max


----------

