Smiles in Textarea einfügen

Hallo,

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

Code: 
<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
 
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:
PHP: 
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*
 
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
 
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!
 
Hi ich zeig dir mal meinen Lösungsvorschlag:
PHP: 
<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:

PHP: 
<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:
PHP: 
$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.
 
Zuletzt bearbeitet von einem Moderator:
Hier noch ein Code mit einer normalen Textarea, der im IE und Mozilla funk-
tioniert.
Code: 
<!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>
 
Original geschrieben von Fabian Hofmann
Hier noch ein Code mit einer normalen Textarea, der im IE und Mozilla funk-
tioniert.

[...]
Zum Vergrößern anklicken....

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!
 
Ich seh gerade, dass der Opera das all-Objekt kennt :(
(Naja, was will man von Opera auch erwarten :rolleyes: )

Einfach die Zeile hier:
Code: 
if (window.document.all) {
in die hier abändern:
Code: 
if (window.document.selection) {
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück