Mit JavaScript zeichen in textarea schreiben



  • Hallo.

    Ich brauche ein kleines Script für mein Gästebuch.
    Ein Kumpel meinte ich soll mal (wie hier im Forum) ein paar smilies auflisten und wenn man draufklickt soll in das Feld wo man seinen Beitrag reinschreibt direkt ein String erscheinen, der für den smilie steht. Ich glaube man benötigt dafür JavaScript.

    Weis jemand wie ich das anstellen kann???

    Hier ist mein Code:

    <form class="input" action="<?php echo $PHP_SELF ?>" method="POST">
    Ihr Kommentar:<br>
    <textarea class="input" cols="55" rows="4" wrap="soft" name="comment"></textarea><br>
    Ihr Name:<br>
    <input class="input" type="type" name="name"><br>
    Ihre Email Adresse:<br>
    <input class="input" type="text" name="email"> <input class="input" type="submit" value="Abschicken"></form>
    //HIER MÖCHTE ICH GERNE DASS BEIM KLICKEN AUF DEN SMILIE EIN " :-) " IM FELD "COMMENT" ERSCHEINT
    <img src="http://www.ms-cyboard.de/ubb/smile.gif" onmouseover="this.style.cursor='hand';">
    


  • Weißt du, wo ich das her hab? Ich habe einfach "View->Source Code" angeklickt und schon hat man ein schönes Beispiel:

    [cpp]<script language="JavaScript" type="text/javascript">
    <!--
    function x () {
    return;
    }

    function storeCaret (textEl) {
    if (textEl.createTextRange)
    textEl.caretPos = document.selection.createRange().duplicate();
    }

    function DoSmilie(addSmilie)
    {
    if (document.REPLIER.message.createTextRange && document.REPLIER.message.caretPos)
    {
    var caretPos = document.REPLIER.message.caretPos;
    caretPos.text =
    caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
    addSmilie + ' ' : addSmilie;
    }
    else
    {
    var revisedMessage;
    var currentMessage = document.REPLIER.message.value;
    revisedMessage = currentMessage+addSmilie;
    document.REPLIER.message.value=revisedMessage;
    }

    document.REPLIER.message.focus();
    return;
    }

    function DoPrompt(action) {
    var TextToAdd;

    if (action == "url") {
    TextToAdd = "[url] [/url]";
    }

    if (action == "email") {
    TextToAdd = "[email] [/email]";
    }

    if (action == "bold") {
    TextToAdd = " ";
    }

    if (action == "italics") {
    TextToAdd = " ";
    }

    if (action == "image") {
    TextToAdd = " ";
    }

    if (action == "liststart") {
    TextToAdd = "[list]";
    }

    if (action == "listitem") {
    TextToAdd = "* ";
    }

    if (document.REPLIER.message.createTextRange && document.REPLIER.message.caretPos)
    {
    var caretPos = document.REPLIER.message.caretPos;
    caretPos.text =
    caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
    TextToAdd + ' ' : TextToAdd;
    }
    else
    {
    var revisedMessage;
    var currentMessage = document.REPLIER.message.value;
    revisedMessage = currentMessage+TextToAdd;
    document.REPLIER.message.value=revisedMessage;
    }

    document.REPLIER.message.focus();

    }
    //-->
    </script>[/cpp]

    [ Dieser Beitrag wurde am 04.03.2003 um 19:02 Uhr von Loggy editiert. ]



  • *lol* hab das problem vor einer minute von einem kumpel gelöst bekommen (danke Gernecker ;))

    Wenn ich mal so den Aufwand vergleiche....*fg*

    <img src="http://www.ms-cyboard.de/ubb/smile.gif" o.n.m.o.u.s.e.o.v.e.r="this.style.cursor='hand';" OnClick="document.all.comment.value=document.all.comment.value+' :) ';">
    


  • habs noch ein bisschen eleganter gelöst bekommen:

    <script language="JavaScript">
    <!--
    
    function AddSmiley(choice){
    
    if(choice==1){  document.all.comment.value=document.all.comment.value+' :) ';   }
    if(choice==2){  document.all.comment.value=document.all.comment.value+' :D ';   }
    if(choice==3){  document.all.comment.value=document.all.comment.value+' :( ';   }
    if(choice==4){  document.all.comment.value=document.all.comment.value+' :x ';   }
    //-->
    }
    </script>
    

    und um HTML Teil:

    <img src="http://www.ms-cyboard.de/ubb/smile.gif" onmouseove.r="this.style.cursor='hand';" OnClick="AddSmiley(1);"> 
    <img src="http://www.ms-cyboard.de/ubb/biggrin.gif" onmouseove.r="this.style.cursor='hand';" OnClick="AddSmiley(2);"> 
    <img src="http://www.ms-cyboard.de/ubb/graemlins/schluchtz.gif" onmouseove.r="this.style.cursor='hand';" OnClick="AddSmiley(3);"> 
    <img src="http://www.ms-cyboard.de/ubb/graemlins/schwuchtel.gif" onmouseove.r="this.style.cursor='hand';" OnClick="AddSmiley(4);"><br><br>
    

    Wieso kann ich eigentlich nicht den Befehl "On Mouse Over" in diesem Forum zusammengeschrieben posten? 😕


  • Mod

    ich will dich ja nicht ärgern.
    aber ein
    addSmiley(':)') würde ich schöner finden, unter den zahlen kann man sich nix vorstellen.

    und Loggy funktion kann n bisschen mehr als deine - denn er fügt den text beim caret ein, du immer am ende...



  • Und ich habe noch den Teil mitgepostet, der auch den UBB Code Kram einfügt. Kannst du ja weglassen, wenn du willst.

    on mouse over darf man nicht posten, weil die Forensoftware angst hat, dass man hier JavaScripts einbaut (wenn HTML aktiviert wäre oder durch andere Sicherheitslücken).



  • Original erstellt von Shade Of Mine:
    und Loggy funktion kann n bisschen mehr als deine - denn er fügt den text beim caret ein, du immer am ende...

    Was müsste ich denn ändern/hinzufügen um das auch zu haben?


  • Mod

    Original erstellt von Peter Piksa:
    Was müsste ich denn ändern/hinzufügen um das auch zu haben?

    schaus dir doch an 🙂

    wichtig ist nur
    storeCaret (zum speichern der Caret Position) und doSmilie (der if-zweig, nicht der else-Zweig ;))



  • Was genau passiert denn hier in diesem Codefetzen?
    Und was muss ich denn übergeben bei textEl???

    function storeCaret (textEl) {
        if (textEl.createTextRange)
            textEl.caretPos = document.selection.createRange().duplicate();
    }
    


  • Schau dir doch den Source Code des Forums an... dann wirst du schon dahinter kommen (und die Postingseite ist auch nicht soo groß, als das man da ewig brauchen würde).

    Ein wenig eigeninitiative müssen wir schon fodern 🙂


Anmelden zum Antworten