How can I use JavaScript to update text at the cursor location inside a textbox

Question

I'm developing in asp.net and have a textbox on the screen with the cursor at a location that some text should be added.

A button exists on the page, or at least it will do and when pressed will insert text into the textbox at the location the cursor was at the point the button was pressed, no text should be lost only a keyword added at the location of the cursor.

Is this possible to in JavaScript, bearing in mind I don't know any JavaScript beyond alert(''); and I do understand when you click the button the cursor location may be lost.

There will actually be seven little buttons each inserting a different string of their own.

I don't think this is possible , you can append data or prepent data , I might be wrong though. — Priyank Patel, Nov 08 '12 at 10:37
Although it might be nice to have a big textbox that writes html or rtf back to the database and allows for inserting of images and bolding of text etc that is in no way the requirement. The requirement is actually as stated above. A separate control on the page that can insert text at a cursors location. — Robert Hancliff, Nov 08 '12 at 10:43

Mohammed Swillam · Accepted Answer · 2012-11-12T20:02:48.923

3

Yes it's possible. this is a function that we are using to do exactly what you are looking for

// myfield: the DOM element that you need to interact with
// myValue: the text to be instered
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;
    }
}

all you need to do is to pass your textbox/textarea as the first parameter, and pass the text as the 2nd parameter, and BOOM, it's working!!

Update: a live example: http://jsbin.com/owesik/1/edit

edited Nov 12 '12 at 20:02

answered Nov 08 '12 at 10:46

Mohammed Swillam

9,119
4
36
47

So myField is basically the ClientID of the control that I want to insert the value into. In ASP.NET I have the ClientID and the ID, the ClientID is the client side id of the html control. I'll give this example a go thank you – Robert Hancliff Nov 08 '12 at 10:52
I'm trying to make a an example for you, hold on. – Mohammed Swillam Nov 08 '12 at 10:58
No thanks I have a running example now. My oversight is that the textboxes are in a GridView and so at runtime I can't associate one button with the textbox the user is in. More likely I need to find the control that has focus at the moment the user presses the button and then get that id and call your function which does work thank you :) – Robert Hancliff Nov 08 '12 at 11:06
regarding your new requirements, you can detect the target textbox by using the clicked button location, and assume that the target textbox is in the same row. is this valid for you scenario? – Mohammed Swillam Nov 08 '12 at 11:11

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

See this answer for a few pointers.

The short version is "yes, it is possible, at least with recent browsers". However, you will need to teach yourself some JavaScript to get this working. I personally recommend this online book (and am in no way affiliated with the author).

edited May 23 '17 at 12:27

Community

1
1

answered Nov 08 '12 at 10:45

tucuxi

17,561
2
43
74

How can I use JavaScript to update text at the cursor location inside a textbox

2 Answers2