How to insert/delete characters in a text area via javascript

Question

How can I add/delete characters in a text area via javascript. Suppose I am taking the input via an onscreen keypad. I need to simulate as many keys as possible such as backspace, del, enter. The more challenging task is to maintain a pseudo-cursor for the textarea and move the cursor as input is received from the keypad.

So if I press the left arrow and I have a track of the pseudo cursor then I need to move the cursor one position back and then insert/delete characters from that position.

I hope I have made myself clear. Any help is appreciated.

I can see no code here... this question is a bit vague. What have you tried so far? — Roko C. Buljan, May 27 '12 at 18:43
I know my question is a little vague, but I am not looking for exact code here. I am just looking for some pointers for how to go about implementing it. So far I have tried this http://bililite.nfshost.com/blog/2011/01/23/improved-sendkeys/ What I am trying to do is to simulate a cursor for a text box, that is controlled by input to javascript maybe say by Ajax — Sachin, May 27 '12 at 18:46
You can trigger keypress with the character you need, and the caret will move where it is suppose to. Look into jQuery.events ! — adeneo, May 27 '12 at 19:04
To manipulate a textarea's content via javascript, you can use the pure JS methods `selectionStart` and `selectionEnd` to get the caret position inside the textarea, and the `substr`/`substring`/`replace`/relative `value` (or JQuery's `.val()`) methods to manipulate the content. However I have no idea how you want to implement it with onscreen keyboard, simulated cursor and ajax altogether. — Fabrício Matté, May 27 '12 at 19:04
onscreen keyboard was just a reference, consider I am getting a series of keystrokes via AJAX, it will include keystrokes such as `enter`, `arrow keys` and I want to `execute` them in a text area. But at the same time I don't want to disturb the caret position in the current document, I just need to insert/remove text from the location irrespective of where the caret maybe(that remains undisturbed) — Sachin, May 27 '12 at 19:43

score 2 · Answer 1 · edited May 23 '17 at 11:51

2

here is a function to read and set the cursor position:

function doGetCaretPosition (ctrl) {
    var CaretPos = 0;   // IE Support
    if (document.selection) {
    ctrl.focus ();
        var Sel = document.selection.createRange ();
        Sel.moveStart ('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);
}
function setCaretPosition(ctrl, pos){
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

Got it from this site

To capture keystrokes you can use jQuery here is a answer to that:

Binding javascript to keys

edited May 23 '17 at 11:51

Community

1
1

answered May 27 '12 at 19:00

Ekim

1,105
11
28

Thanks I will check this out, but I don't want to set the position of the actual cursor, rather I want to create a pseudo-cursor by recording its position, and whenever a new character comes in, insert it at the correct location – Sachin May 27 '12 at 19:03
I have run into another problem with capturing key stokes, special keys such as arrow keys are recorded by `keydown` but `keydown` generates single event when a key pong pressed, but I wanted to generate a separate event to correctly insert characters at the right position – Sachin May 27 '12 at 19:06
You can capture keys globally using $(document).keydown(function(e){ if (e.keyCode == 33) { linenumber++; return false; } ... } to avoid setting a real cursor you could set the focus to some othe element on the page. – Ekim May 27 '12 at 19:30

score 1 · Answer 2 · edited Jul 13 '15 at 08:42

1

Prevent default handling when a key is pressed

$('#textArea').keypress(function(event) {
  //console.log("Key down:" + event.keyCode);
  event.preventDefault();
  processKey(event);
});

Do your processing in processKey(event)
Set the caret position based on your processing

function setCaretPosition(pos){
    var target = document.getElementById("target"); 
    if(target.setSelectionRange) {
        target.focus();
        target.setSelectionRange(pos,pos);
    }
    else if (target.createTextRange) {
        var range = target.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

edited Jul 13 '15 at 08:42

Elazar

20,415
4
46
67

answered May 27 '12 at 19:03

Pramod

5,150
3
45
46

Thanks for your answer but as I have commented to the below answer I do not intend to change the position of the actual cursor rather create a pseudo-cursor. But I think I have something to work on now – Sachin May 27 '12 at 19:08
I'm working on a similar app too and to make key handling work in different browsers is a pain. You can try google web toolkit. It was used to create typeracer.com. – Pramod May 27 '12 at 19:12

How to insert/delete characters in a text area via javascript

2 Answers2