CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
Maciej Kwas
Maciej Kwas

Reputation: 6419

Disable window scroll with arrow when input has a focus

I have a table that looks like this:

Example

The behaviour that drives me crazy is when you have a focus on input element and hold right arrow on keyboard, when caret touch the end of line whole window automatically starts to scroll. I was going crazy with preventDefault and stopPropagation, but with no success.

Is there any way to let user move caret freely in the input element, but when he hits to border, the main window would not scroll?

Upvotes: 2

Views: 824

Answers (1)

OlliM
OlliM

Reputation: 7113

You can prevent horizontal scroll by setting:

body {
    width: 100%;
}

body.prevent-scroll {
    overflow: hidden;
}

Then we listen to focus and blur events to add or remove the class:

$("input")
  .on("focus", function() { 
      $("body").addClass("prevent-scroll")
  })
  .on("blur", function() { 
      $("body").removeClass("prevent-scroll")
  })

http://jsfiddle.net/9zgspozq/2/

Upvotes: 2

Related Questions