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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Insert Text in to Text Area with link

    Hi,

    I am wanting to insert text into a text area when a button or link is clicked. I know how to replace the whole lot in the text area, but I want it to insert text where the flashing cursor is in the text box. (Like Wikipedia)

    If any one can help, Then I will be very, very greatfull.

    Thank You.

  • #2
    New Coder
    Join Date
    Mar 2010
    Location
    New York
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post
    First, you should call a form. In this case, I wrapped it in a table, although you could easily wrap it in any DIV.

    Code:
    <form name="form">
    <table><tr>
    <td>
    <!-- Here's the link --> 
    <a href="#" onClick="javascript:textaddition();"></a>
    </td>
    <td>
    <!-- Text box (adjustable with CSS or whatever) -->
    <textarea name="input"></textarea></td>
    </tr></table>
    </form>
    Then you're going to call it with some JavaScript:
    Code:
    <script language="javascript" type="text/javascript">
    function textaddition() {
    	var text = This value can be set to anything, even another textbox;
    	document.form.input.value += text;
    }
    </script>
    I don't know, I didn't test it. Just wrote it now. But it should work.
    Maybe someone else can make it better or something. Have other things to work on now. Would love to see the final result, however. I could use something like this eventually.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    SSCR9 - the OP wants to insert text, not simply append it.

    Try this:-

    Code:
    <form name = "myform">
    <textarea name = "txta" rows = "10" cols = "50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. </textarea><br>
    <textarea name = "txtb" rows = "10" cols = "50"></textarea>
    
    <br><br>
    <input type = "button" value = "Add This Text At Cursor In First Textbox" onclick = "insertAtCursor(document.myform.txta, document.myform.txtb.value)">
    
    </form>
    
    <script type = "text/javascript">
    
    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;
    }
    }
    
    </script>
    Quizmaster: The Garden of Gethsemane in Jerusalem is at the foot of the Mount of ... what?
    Contestant: Everest.
    Last edited by Philip M; 03-06-2010 at 09:11 AM. Reason: Add blue highlight

  • #4
    New Coder
    Join Date
    Mar 2010
    Location
    New York
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post
    Phillip M - Wouldn't that just add text if the cursor was within the box? And no.. my script added the text, it didn't just add a "value=" I just tried it in firefox.


  •  

    Tags for this Thread

    Posting Permissions

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