I know there are ways to position the cursor in an input field. Is there a way to detect a cursor move or preferably disable cursor movement via the arrow keys? I'm implementing an onscreen keyboard and the cursor moves left and right as the user moves left and right over the keyboard. I would like to keep the input field focused the whole time.

I know there are ways to position the cursor in an input field. Is there a way to detect a cursor move or preferably disable cursor movement via the arrow keys? I'm implementing an onscreen keyboard and the cursor moves left and right as the user moves left and right over the keyboard. I would like to keep the input field focused the whole time.

• javascript
• html
• dom-events
• keyboard-events

• 2 I think a jsfiddle would help to illustrate your case. I don't know how you're trying to implement it. – Lian Commented Mar 13, 2014 at 15:55
• When you refer to the cursor, do you mean the mouse pointer or the flashing cursor in the text field to show where text is being inserted? – Dakotah Hicock Commented Mar 13, 2014 at 15:56
• Thanks, useful question and 2 useful answers. But how about disabling cursor movement by the mouse? For me that is of equal concern. – Zeek2 Commented Feb 22, 2017 at 9:53

2 Answers 2

You can attach a keydown or keyup event listener for that input, and invoke the preventDefault() method on the event object if the keyCode corresponds to cursor left and cursor right buttons. This will disable the caret movement.

yourInputElement.addEventListener('keydown', function(e){
    if(e.keyCode == 37 || e.keyCode == 39)
        e.preventDefault();
});

Here's a jQuery solution--blocks left/right arrow keys.

$([your input identifier]).keydown(function(event){
    if(event.which == 39 || event.which == 37){
        return false;
    }else{
        return true;
    }
});