javascript - Detect or disable cursor movement in input field - Stack Overflow

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

Share Improve this question Follow edited Oct 2, 2019 at 17:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 13, 2014 at 15:51 voodoogiantvoodoogiant 2,15866 gold badges3131 silver badges5353 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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;
    }
});