Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Textarea script to insert word at cursor?

    Hi,
    I'm working on a form for visitor's messages and comments, and I need help with a Java Script to accomplish what I am looking for.
    I'd like to add a row of several images, that when clicked they add text in the message area where the cursor is located.
    I am looking for a script function similar to the AddWord function that I worked up below.
    The script function really needs to be like an InsertWord function that inserts the word where the cursor is located.
    It will work similar to adding smilie icons to your message when you post messages on some forums.
    Here is the version that I've worked up with the AddWord function for an example.
    This version will only add the word at the end of the textarea, not where the cursor is located.
    I'd appreciate any help or examples that I can use to make this work.
    Thanks for your help.
    Terry
    Here's an image of the html form below.

    Code:
    <html>
    <head>
    <title>Insert Icon</title>
    <script>
    function AddWord(word)
    { 
      document.getElementById('message').value=document.getElementById('message').value + word; 
    }
    </script>
    </head>
    <body>
    <p align="center"><b>Insert Icon</b></p>
    <form method="POST" action="/cgi-bin/cgiemail/websitename/sendform.cgi">
    <center>
    <a title="Smile"><img border="0" src="Smile.gif" onclick="AddWord('{Smile}');" width="16" height="16"></a>
    <a title="Frown"><img border="0" src="Frown.gif" onclick="AddWord('{Frown}');" width="16" height="16"></a>
    <br>
    <textarea name="message" rows="6" cols="30" wrap></textarea>
    <br>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    Last edited by Terry Cadd; 02-20-2009 at 05:08 AM.

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    See if this page gets you any further!
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I think the OP needs a rich text editor, as it's not possible to insert(and rneder) an image or any html tags into a text area.
    Last edited by abduraooft; 02-20-2009 at 04:24 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    I can't speak for the OP of course, but if I read the question correctly he is looking for a way to insert bits like "{smile}" and "{frown}" in a textarea upon clicking an image... which is basically code used to insert a smiley. Rich text editors can have that feature as well, but it is definately possible to insert text bits like that in a textarea.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    The program that reads in the messages and posts from the members and visitors will interpret the smiley codes and place them in their posts in the correct place. Here is a great find that I came across that does exactly what I was looking for, for smiley image codes in textareas.
    Thanks,
    Terry

    Code:
    <html>
    <head>
    <title>Insert Word</title>
    <script type="text/javascript">
    <!--
    function InsertWord(word) {
      field = document.getElementById('message');
      if (document.selection) {
        field.focus();
        var sel = document.selection.createRange();
        sel.text = word;
        sel.select();
      } else if (field.selectionStart || field.selectionStart == '0') {
        var start = field.selectionStart;
        var end = field.selectionEnd;
        var scroll = field.scrollTop;
        field.value = field.value.substring(0, start) + word + field.value.substring(end, field.value.length);
        field.focus();
        field.selectionStart = start + word.length;
        field.selectionEnd = start + word.length;
        field.scrollTop = scroll;
      } else {
        field.value += word;
        field.focus();
      }
    }
    //-->
    </script>
    </head>
    <body>
    <p align="center"><b>Insert Word</b></p>
    <form method="POST" action="/cgi-bin/cgiemail/websitename/sendform.cgi">
    <center>
    <a title="Smile"><img border="0" src="Smile.gif" onclick="InsertWord('{Smile}');" width="16" height="16"></a>
    <a title="Frown"><img border="0" src="Frown.gif" onclick="InsertWord('{Frown}');" width="16" height="16"></a>
    <br>
    <textarea name="message" rows="6" cols="30" wrap></textarea>
    <br>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Needs one small change to make work correctly
    Code:
    <textarea id="message" name="message" rows="6" cols="30" wrap></textarea>


  •  

    Posting Permissions

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