SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple way to put text into text box when user clicks image

    Hello,

    I want to build simple comment box. It will containt text box, few smilies and view pictures for inserting tags like , , like in vBulletin and phpBB.

    When user clicks on smile, script adds something like "" or "" into text box. I wonder what is simpliest way to do this?

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The simplist way is to use server side coding to convert all instances of and into images and then use Javascript to insert and as text.

    to go one step further and actually display them, you'd have to use some sort of javascript WYSIWYG like the Quick reply box i'm using now.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <script type="text/javascript">
                function insertSmiley(which) {
                    var textarea = document.getElementById('test');
                    textarea.value += which;
                }
            </script>
        </head>
        <body>
            
            <img src="http://www.sitepoint.com/forums/images/smilies/smiles2/smile.gif" onclick="insertSmiley(':)');" />&nbsp;<img src="http://www.sitepoint.com/forums/images/smilies/smiles2/wink.gif" onclick="insertSmiley(';)');" />
    
            <br /><br />
    
            <textarea id="test"></textarea>
    
        </body>
    </html>
    That is the simplist way.


  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Works great.

  4. #4
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wonder how can I insert tags into textarea right where cursors stays right now? I do not mean putting tags after written text as this code does:

    Code:
    textarea.value += which;

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are wanting to replicate the tag insertion like on the input for this forum, then have a search, i've already provided code for people to do this.

    or http://weblogs.asp.net/skillet/archi...24/395838.aspx


  6. #6
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    If you are wanting to replicate the tag insertion like on the input for this forum, then have a search, i've already provided code for people to do this.

    or http://weblogs.asp.net/skillet/archi...24/395838.aspx
    Thanks, but it doesn't work in Firefox.

    Is there any way to do it without searching for cursors' position?

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't search for the cursors position, then you won't be able to insert the tags at the cursor position, and only at the end.

    http://en.allexperts.com/q/Javascrip...-selection.htm



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •