Insert into textarea | JavaScript

Question

I'm trying to insert the image url where the point of the is to be when editing the textarea value.

function addImageURL()
{
 var imageurl = prompt("Enter image URL", "Your name")
 var post = document.getElementById("message-put").value;

 document.getElementById('message-put').value = post + '[img]' + imageurl + '[/img]';
}

This code grabs the value inside the adds the image url next to it which I don't want, I need it to insert it where the point was when editing the textarea

Thanks

EDIT:

Like Stackoverflow, you see the image icon, you click it or click on the hyperlink, a box comes up and inserts it where you were editing the textarea :P

...the value inside the adds the image url next to it... O_o Do you mean you want to insert something into the text area at the cursor? — Vivin Paliath
– Vivin Paliath, Commented May 26, 2010 at 21:53

Vivin Paliath · Accepted Answer · 2010-05-26 22:01:28Z

If you want to insert something at the cursor, here is something I found using teh Googlez:

function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) );

    if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart('character', -txtarea.value.length);
        strPos = range.text.length;
    } else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, strPos);
    var back = (txtarea.value).substring(strPos, txtarea.value.length);

    txtarea.value = front + text + back;
    strPos = strPos + text.length;

    if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart('character', -txtarea.value.length);
        range.moveStart('character', strPos);
        range.moveEnd('character', 0);
        range.select();
    } 

    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }

    txtarea.scrollTop = scrollPos;
}

The source: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/ (I haven't tested this; it's from 2008 so it may be a little dated).

Community · Accepted Answer · 2017-05-23 11:53:16Z

0

A technique I used when trying to achieve similar functionality in a WYSIWYG:

Retrieve parent node from selection (range) in Gecko and Webkit » StackOverflow

Might be useful if working with frames, or want to avoid some cursor issues I ran into.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered May 26, 2010 at 22:25

Jason

2,7511 gold badge27 silver badges28 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:09:05Z

0

I think you may find what you're looking for here:

Caret position in textarea, in characters from the start

And an example implementation here:

http://javascript.nwbox.com/cursor_position/

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered May 26, 2010 at 21:58

marapet

56.9k13 gold badges176 silver badges186 bronze badges

Collectives™ on Stack Overflow

Insert into textarea | JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related