Programmatically press "Left" key in a text input

Question

I am trying to programmatically fire a key event to go left in a text box, but not having any luck.

The input element has focus and the cursor is at the end. I'm trying to get the cursor to move left one step - before the letter "F" *programmatically by firing a Keyboard event (keydown/keyup/keypress) with the corresponding keystroke ← or → targeted at the input box.

ABCDEF|

Here's the code so far:

HTML

<input id="a" type="text" />

Javascript

var keyEvent = document.createEvent("KeyboardEvent");

var keyLocation = '0x00';
var keyIdentifier = "Left";

keyEvent.initKeyboardEvent("keypress",
                        true,
                        true,
                        window,
                        keyIdentifier,
                        keyLocation,
                        false);

$("a").dispatchEvent(keyEvent);

Saved a quick demo on jsfiddle if you want to see the whole code - http://jsfiddle.net/Vsafv/

I am not interested in making this cross-browser (just get it working in Chrome).

hndcrftd · Accepted Answer · 2010-05-28T16:18:52.043

10

e = jQuery.Event("keydown"); // define this once in global scope
e.which = 37; // Some key value
$("input").trigger(e);

where "input" is your textarea

37 - left
38 - up
39 - right
40 - down

So when you record your "events" you record the values for the keys pressed.
I'm sure you already figured out a way to do this but just in case, here's an idea of how i would tackle it:

var keysPressed = new Array(); // somewhere in the global scope
$("input").keydown(function (e) {
    keysPressed.push(e.which); //adding values to the end of array
});

Hope this helps

edited May 28 '10 at 16:18

answered May 28 '10 at 16:08

hndcrftd

3,180
1
21
18

Thanks for the solution @Raine. I have tried a basic example with your code - http://jsfiddle.net/sZL3H/, but did not have any luck. – Anurag May 31 '10 at 17:15

score 8 · Answer 2 · answered May 14 '10 at 07:42

8

And for those not viewing jQuery as the solution to everything :)

From http://blog.josh420.com/archives/2007/10/setting-cursor-position-in-a-textbox-or-textarea-with-javascript.aspx

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

answered May 14 '10 at 07:42

Sean Kinsey

37,689
7
52
71

Wanted to -1 as there's not enough jQuery :P, but seriously - thanks for the solution. I can move the caret around, but am interested in knowing if it can be done by firing a Keyboard event like "keydown/keyup/keypress". Reason being I am writing a script to replay user actions, and it becomes trivial if I can just record all event objects, and dispatch them at a later point. It's far simpler than trying to map each event to an appropriate action/function while replaying as in the above case where ← or → keys map to something that moves the caret. – Anurag May 14 '10 at 16:33
-1 Doesn't answer the question how to send events to a text input. The example just works to position the cursor to some specific position but not how to properly create an event and how to make the browser process it. – Aaron Digulla May 31 '10 at 07:18
@Aaron, when I answered the question could be interpreted to mean 'how to I move the cursor left', and this is a perfectly valid answer for that. – Sean Kinsey May 31 '10 at 15:18

score 1 · Answer 3 · answered May 31 '10 at 09:52

1

As far as I can see, you can do:

var pos = document.getElementById("a").length; 
document.getElementById("a").setSelectionRange(pos-1, pos-1);

answered May 31 '10 at 09:52

Vestel

1,005
1
11
25

Programmatically press "Left" key in a text input

3 Answers3