# Smiles in Textarea einfügen



## majola (10. Dezember 2003)

Hi
Ich möchte ein Smile in einer Textarea mitten in den Text einfügen. Nicht aber am Schluss!
Kann mir wer helfen?


----------



## Andreas Gaisbauer (10. Dezember 2003)

Hallo,

das geht  meines Wissens leider nur mit dem IE - alle anderen werden es am Schluss einfügen...


```
<html>
<head>
  <script type="text/javascript">
    function GetCursor() { 
      if (( navigator.userAgent.indexOf("Opera") != -1) || (navigator.userAgent.indexOf("Gecko") != -1)) { 
        text_before = document.formular.message.value; 
        text_after = ""; 
      }else{ 
        document.formular.message.focus(); 
        var sel = document.selection.createRange(); 
        sel.collapse(); 
        var sel_before = sel.duplicate(); 
        var sel_after = sel.duplicate(); 
        sel.moveToElementText(document.formular.message); 
        sel_before.setEndPoint("StartToStart",sel); 
        sel_after.setEndPoint("EndToEnd",sel); 
        text_before = sel_before.text; 
        text_after = sel_after.text; 
      } 
    } 

    function insert(AddCode) { 
      GetCursor(); 
      document.formular.message.value = text_before + AddCode + text_after; 
      document.formular.message.focus(); 
    } 
</script>
</head>
<body>
<form name="formular">
  <input type="button" value=":-) einfügen" onclick="insert(':-)')"> <br>
  <textarea name="message"></textarea>
</form>
</body>
</html>
```

bye


----------



## majola (10. Dezember 2003)

toll, es ! 
merci!

ps: weiss vielleicht jemand wie es für andere browser geht? z.B. Netscape und Mozilla?


----------



## Gottox (19. Dezember 2003)

Also es gibt ne möglichkeit, leider nur, wenn man nicht ne Textarea, sondern z.B. nen iframe mit designMode(ja, den gibts auch für Moz!) benutzt...
Hier das Beispiel:

```
function insertNodeAtSelection(win, insertNode)
  {
      // get current selection
      var sel = win.getSelection();

      // get the first range of the selection
      // (there's almost always only one range)
      var range = sel.getRangeAt(0);

      // deselect everything
      sel.removeAllRanges();

      // remove content of current selection from document
      range.deleteContents();

      // get location of current selection
      var container = range.startContainer;
      var pos = range.startOffset;

      // make a new range for the new selection
      range=document.createRange();

      if (container.nodeType==3 && insertNode.nodeType==3) {

        // if we insert text in a textnode, do optimized insertion
        container.insertData(pos, insertNode.nodeValue);

        // put cursor after inserted text
        range.setEnd(container, pos+insertNode.length);
        range.setStart(container, pos+insertNode.length);

      } else {


        var afterNode;
        if (container.nodeType==3) {

          // when inserting into a textnode
          // we create 2 new textnodes
          // and put the insertNode in between

          var textNode = container;
          container = textNode.parentNode;
          var text = textNode.nodeValue;

          // text before the split
          var textBefore = text.substr(0,pos);
          // text after the split
          var textAfter = text.substr(pos);

          var beforeNode = document.createTextNode(textBefore);
          var afterNode = document.createTextNode(textAfter);

          // insert the 3 new nodes before the old one
          container.insertBefore(afterNode, textNode);
          container.insertBefore(insertNode, afterNode);
          container.insertBefore(beforeNode, insertNode);

          // remove the old node
          container.removeChild(textNode);

        } else {

          // else simply insert the node
          afterNode = container.childNodes[pos];
          container.insertBefore(insertNode, afterNode);
        }

        range.setEnd(afterNode, 0);
        range.setStart(afterNode, 0);
      }

      sel.addRange(range);
  };
```
Stammt von http://www.mozilla.org/editor/midas-spec.html
Ein Tipp: DesigMode ist viiiiieeel besser als normal*lol*


----------



## Patrom (17. Februar 2004)

*Nochmal das hier*

Hi @ all

Entschuldigung wenn ich so ein altes Thema nochmal aufkreife aber ich habe eine Frage zu dem oben geposteten Script. 

Was bedeuten die Befehle:

startContainer ?
getRangeAt(0) ?
createRange()?

Ich habe bei SELFHTML geschauht aber leider nichts gefunden!

Thx
Pat-ro


----------



## Jessix (27. Februar 2004)

Hi,

ich habe mich wegen genau dieser Sache hier im Forum registriert 

Brauche genau dieses Script, wo es an die Stelle vom Cursor eingefügt wird.
Kenne mich mit JS nicht aus, und habe deswegen noch Fragen:

Wenn ich das richtig interpretiere, wird der gesamte Texte an der Stelle vom Cursor aufteteilt, und dann als Davor + Zeichen + Danach eingefügt? Wird der Text da zwischengespeichert? Klappt das auch gut mit Textfeldern, wo einige Tausend Zeichen drin sind?

Dann noch ein Feature, was mir sehr wichtig wäre: Ist es machbar, dass der Cursor nach dem Einfügen hinter den eingefügten Zeichen steht?

Hoffe auf eure Tipps ;-)

Danke!


----------



## Lukasz (27. Februar 2004)

Hi ich zeig dir mal meinen Lösungsvorschlag:

```
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley1.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi1'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley2.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi2'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley3.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi3'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley4.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi4'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley5.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi5'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley6.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi6'"><br>
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley7.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi7'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley8.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi8'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley9.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi9'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley10.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi10'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley11.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi11'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley12.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi12'"><br>
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley13.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi13'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley14.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi14'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley15.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi15'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley16.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi16'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley17.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi17'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley18.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi18'"><br>
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley19.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi19'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley20.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi20'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley21.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi21'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley22.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi22'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley23.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi23'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley24.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi24'"><br>
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley25.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi25'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley26.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi26'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley27.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi27'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley28.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi28'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley29.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi29'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley30.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi30'"><br>
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley31.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi31'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley32.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi32'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley33.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi33'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley34.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi34'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley35.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi35'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley36.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi36'"><br>
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley37.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi37'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley38.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi38'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley39.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi39'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley40.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi40'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley41.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi41'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley42.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi42'"><br>
<img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley43.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi43'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley44.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi44'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley45.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi45'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley46.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi46'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley47.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi47'"><img src="http://lukasz.nerdcamp.net/h2/chat/smilies/smiley48.gif" border="0" onclick="document.getElementById('eingabefeld').value += 'smi48'"><br>
....
```

Wichtig ist nur den namen der Textera einztragen und dann musst du noch beachten, dass die Textera entweder im Gleichen Dokument liegt, oder mittels inculde darunter.

Die Textera Dazu:


```
<textarea id='eingabefeld' rows='4' cols='35'  type='text' value='Kommentar' name='input_comment' size='30' maxlength='$maxlength_comment' onFocus=\"javascript:if(document.shoutbox.input_comment.value=='Kommentar')document.shoutbox.input_comment.value='';\"></TEXTAREA>
```
Gruss (wenns hilft gut, wenn nicht war nur ein Vorschlag).

Edit Mal angenommen die DB spalte wo deine Texte stehen heist message
wandelst du die Ausgabe in Simlies so um:

```
$row[messages] = preg_replace("/smi*(\d+)/",'<img src="smilies/smiley\\1.gif">',$row[messages]);

echo "Text: ".$row[messages] ."<hr> ";
```

Die Simillies heissen dann im deinem Ordner 1.gif,2.gif,3.gif.......

Allerdings fürs umwandeln PHP script nötig oder selber ein Java script schreiben.


----------



## Fabian H (27. Februar 2004)

Hier noch ein Code mit einer normalen Textarea, der im IE und Mozilla funk-
tioniert.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset-8859-1">
        <title>In Textarea einf&uuml;gen</title>
        <script type="text/javascript">
        function insertText(a_oEl, a_sText) {
            a_oEl.focus();

            if (window.document.all) {
                oSelection      = window.document.selection.createRange();
                oSelection.text = a_sText;
            } else if (navigator.appName == "Netscape") {
                sOldValue = new String(a_oEl.value);
                iStart    = a_oEl.selectionStart;
                iEnd      = a_oEl.selectionEnd;
                sNewValue = sOldValue.substring(0, iStart) + a_sText + sOldValue.substring(iEnd, sOldValue.length);

                a_oEl.value = sNewValue;
            } else {
                a_oEl.value += a_sText;
            }
        }
        </script>
    </head>
    <body>
         <h1>In Textarea einf&uuml;gen</h1>
         <form name="FooForm">
             <textarea name="FooArea" style="width:300px;height:150px;"></textarea>
             <br><br>
             <input type="button" value="Text einf&uuml;gen"
                    onclick="insertText(window.document.forms['FooForm'].elements['FooArea'], 'foobar');">
         </form>
    </body>
</html>
```


----------



## Jessix (27. Februar 2004)

> _Original geschrieben von Fabian Hofmann _
> *Hier noch ein Code mit einer normalen Textarea, der im IE und Mozilla funk-
> tioniert.
> 
> ...



Hi, danke, das klappe im IE ganz gut! Cursor ist danach hinter dem eingefügtem Wort! Leider passiert im Opera garnichts; wird nichtmal am Ende eingefügt. Ist es ein großer Aufwand, das noch einzubauen? 

danke!


----------



## Fabian H (27. Februar 2004)

Ich seh gerade, dass der Opera das _all_-Objekt kennt 
(Naja, was will man von Opera auch erwarten  )

Einfach die Zeile hier:

```
if (window.document.all) {
```
in die hier abändern:

```
if (window.document.selection) {
```


----------



## Jessix (27. Februar 2004)

Hi, danke! Fix 

Ja, damit gehts! Cursor ist danach am Anfang der Textarea. Kann man das auch noch ändern? Dass er wie beim IE oder Mozilla am eingefügten Wort ist, geht wohl nicht?

Und noch eine Frage, die nicht direkt was damit zu tun hat: Bei mir geht es nicht um Smilies, sondern um polnische Sonderzeichen.

Die wären da:

?	?
?	?
Ó	ó
?	?
?	?
?	?
?	?
?	

Wie füge ich die da ein?! Hab da keinen blassen Schimmer... und zwar als Zeichen wenns geht, nicht als Nummer (aus der Zeichentabelle kopiert und eingefügt geht ja auch) - ist das machbar?
Hab rumprobiert aber komme zu nix :/

DankeschöN!
Gruß

EDIT: Ja, das FOrum hier zeigt sie nichtmal an 
Eben diese hier:


----------



## Sven Mintel (27. Februar 2004)

Da musst du schon eine numerische Schreibweise verwenden, z.B. Unicode...
falls du mit Zeichentabelle die Win-Zeichentabelle, oder die von Office meinst, die würd ich nicht verwenden, die ist nicht normgerecht, soweit ich weiss.
Dann solltest du für das <textarea> eine Schriftart angeben, wo diese Zeichen auch drinnen sind... das ist nicht bei allen der Fall.
du kannst den Leuten ja für jedes Zeichen einen Button machen, welchen sie benutzen können, falls sie keine polnische Tastatur haben.

Test:C ? c ? L ? l ? Ó Ó ó ó S ? s ? Z ? z ? Z ? z 
....komisch, bei mir gehts.... scheint also auch hier im Forum an der Win-Zeichentabelle zu liegen.

@Nuinmundo:der Opera tut nur so, als ob er "all" versteht(naja, nen bischen davon versteht er sogar).... wenn du eingestellt hast, dass er sich als IE ausgeben soll.... ansonsten macht er das eigentlich nicht.


----------

