www.webdeveloper.com
Results 1 to 5 of 5

Thread: Insert at cursor point

  1. #1
    Join Date
    Jun 2008
    Posts
    223

    Insert at cursor point

    Hi, I have a script that inserts a Smiley into a textarea for a forum script I'm working on.

    It works, except that the insertion will only appear at the end of all the existing text.

    Is there some way to have the smiley insert at the cursor point?

    Code:
    function AddText(form, Action){
    var AddTxt="";
    var txt="";
    if(Action==1) AddTxt=" :smile: ";
    if(Action==2) AddTxt=" :big grin: ";
    if(Action==3) AddTxt=" :wink: ";
    form.body.value+=AddTxt;
    }
    
    function ResetPage(form) {
    if(confirm("Reset the page?")) { 
    form.body.value="";     
    form.Name.value="";
       }
    }
    The name of the textarea is: body
    Plain textarea, no BBCode or WYSIYG involved

    I can do minor stuff in JS, but do not know how to do this.
    Any help is greatly appreciated.

    Thanks

  2. #2
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Not to be mean, but did you try this: http://lmgtfy.com/?q=JavaScript+insert+at+cursor

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  3. #3
    Join Date
    Jun 2008
    Posts
    223
    So we're talking this.
    Code:
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
    A { text-decoration: underline; color:#000066;}
    A:Hover {text-decoration: none; color:#009999;}
    
    /* ---- Smilies ---- */
    .smilebut {
     width:15px;
     height:15px;
     cursor:pointer;
     background-color:transparent;
     border:0px none;
     padding:0px;}
    .smileybar {margin-bottom:5px; border:1px solid #00c0c0; background:#00ffff; height:17px;}
    .smiley {vertical-align:middle;}
    </style>
    <script type="text/javascript">
    <!-- Begin
    function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    }
    //MOZILLA/NETSCAPE support
    else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);
    } else {
    myField.value += myValue;
    }
    }
    // End -->
    </script>
    </head>
    <body>
    <div align="center">
    Getting the smiley to insert at cursor, not end of text.<br>
    Smilies are in folder named "smilies".<br>
    <i>Works with Smilies - don't know about anything else.</i>
    
    <form name="myformname" action="">
    <textarea name="mytextarea" cols="30" rows="10"></textarea>
    <table border="0" cellpadding="2" cellspacing="0" class="smileybar"><tr align=center valign=bottom>
    <td><img src="$sitepath/images/blank.gif" border="0" width="1" height="1" alt="blank"></td>
    <td>
    <input type="button" style="background-image: url(smilies/smile.gif);" onClick="insertAtCursor(document.myformname.mytextarea, ' :smile: ');" title="smile" name="smile" class="smilebut">
    <input type="button" style="background-image: url(smilies/biggrin.gif);" onClick="insertAtCursor(document.myformname.mytextarea, ' :biggrin: ');" title="smile" name="smile" class="smilebut">
    </td>
    <td><img src="$sitepath/images/blank.gif" border="0" width="1" height="1" alt="blank"></td></tr>
    </table>  
    <input type="Reset" class="btns"> 
    </form>
    </div>
    &nbsp;<br>
    </body>
    </html>
    A complete replacementof the original code and it works.
    Tested in IE, FFx and Chrome.
    Thanks.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Thumbs up Nice ...

    Small addition to you table after the image displays:
    Code:
     <tr><td colspan="3">
      <input type="button" onClick="insertAtCursor(document.myformname.mytextarea, '<b>');" title="bold" name="smile" value="<b>">
      <input type="button" onClick="insertAtCursor(document.myformname.mytextarea,'<br>');" title="break" name="smile" value="<br>">
      <input type="button" onClick="insertAtCursor(document.myformname.mytextarea, '<p>');" title="paragraph" name="smile" value="<p>">
      <input type="button" onClick="insertAtCursor(document.myformname.mytextarea, '<i>');" title="italics" name="smile" value="<i>">
     </td></tr>

  5. #5
    Join Date
    Jun 2008
    Posts
    223
    Hi JMRKER, thanks, I had considered mentioning that, but decided not to, so people can add what they want.

    As I'm using these in developing a bulletin board package, they will be added to an existing BBCode.

    For HTML editing, your suggestion is good

    For those not used to doing stuff like this, where is says "myformname.mytextarea" in the buttons, make sure you replace these with the name of your form and the name assigned to the txtarea.

    King's script can be used as a basis for a lot of things. It's small and I've been messing around and found it worked in Google Chrome (quite a few things don't) as well as IE and FFx.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles