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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Insert Text at Cursor

    I'm trying to put together a simple a editor that allows users to click a link and have it insert text into a text field. While I can find something that works like this on elsewhere, I have a bit of a special requirement. I need it to be able to put text where the cursor is. There are two text fields that the same set of links to insert text can operate on.

    PHP Code:
    <html>
    <
    body>

    <
    form method="post" action="">
     <
    textarea id="field1" name="field1"></textarea>
     <
    textarea id="field2" name="field2"></textarea>
     <
    a href="#" onclick="insert(<img src="picture1.gif" width="320" height="240" alt="picture1.gif")">Picture1.gif</a>
     <
    a href="#" onclick="insert(<img src="picture2.gif" width="320" height="240" alt="picture2.gif")">Picture2.gif</a>
    </
    form>

    </
    body>
    </
    html
    So depending on where the cursor last was, it would insert the text into that specific text field. Also, I need it to be able to specify the filename and other img tags where the function is called rather than in the javascript itself.

    I'm trying to learn javascript, but I'm not finding much good info about it. Just seeing the code for this would really help me, but if you could comment some lines or at least point me in the right direction, I would be eternally grateful.

    Thanks in advance

  • #2
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Brandoe85
    Thanks, but... From the looks of it, it doesn't cover the multiple textfields, and, more importantly, I need this to work in Mozilla/Safari browsers. If you find something that works in those browsers but not in IE, great!!! I don't need it to work in that browser.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Try something like this:
    PHP Code:
    <script type="text/javascript">
    function 
    insert(el,ins) {
        if (
    el.setSelectionRange){
            
    el.value el.value.substring(0,el.selectionStart) + ins el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
        }
        else if (
    document.selection && document.selection.createRange) {
            
    el.focus();
            var 
    range document.selection.createRange();
            
    range.text ins range.text;
        }
    }
    </script>

    <form>
    <input type="button" value="hello" onclick="insert(this.form.ta,'hello')">
    <input type="button" value="my freind" onclick="insert(this.form.ta,'my friend')">
    <br />
    <textarea rows="7" cols="30" name="ta">
    This is sample text, click anywhere in here then
    choose on of the buttons above to see text inserted.
    </textarea>
    </form> 
    Last edited by JohnKrutsch; 04-19-2005 at 04:11 AM.

  • #5
    New Coder
    Join Date
    Feb 2003
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I got so excited when I found this! I installed and it wouldn't work... so I started debugging... and then I realised I need it to work where the button is not enclosed in the form tag. Is this possible?

    My textarea is on one side of my page and my instructions and tips are on the other. Using a button to add a firstname is on the tips side of my page.

    Other than that - it's perfect! Can someone please help?

    thanks,

    jo


  •  

    Posting Permissions

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