Skip to content

Instantly share code, notes, and snippets.

@soullivaneuh

soullivaneuh/index.js

Created September 28, 2018 12:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save soullivaneuh/bcb10c3fae3034474fcd26b66aafc643 to your computer and use it in GitHub Desktop.
Save soullivaneuh/bcb10c3fae3034474fcd26b66aafc643 to your computer and use it in GitHub Desktop.
Download ZIP
Prevent PageUp and PageDown press in textarea moving website out of the window
Raw
index.js
// @see http://www.competa.com/blog/chrome-bug-pageup-pagedown-textarea-moves-website-window/
// @see https://bugs.chromium.org/p/chromium/issues/detail?id=890248
document.querySelector('textarea').addEventListener('keydown', event => {
if (event.key === 'PageUp' || event.key === 'PageDown') {
const cursorPosition = event.key === 'PageUp' ? 0 : event.target.textLength;
event.preventDefault();
event.target.setSelectionRange(cursorPosition, cursorPosition);
}
});
@marckris
Copy link

I've been annoyed by this for years. It's now 2020 in a few days and the bug is still there. It's even worst when you use white-space="pre", the Home key doesn't even work properly. Personally I will try to avoid hacking anything non-fatal which is supposed to work but doesn't.

@softwareCobbler
Copy link

Neat, I was wondering if I was the only one seeing such an issue. In my case the PGUP/PGDN keys in a textarea or div[contentEditable] cause an offscreen drawer to appear. What's surprising about the bug is that it survives hard refreshes - the element remains in its erroneous position no matter the number of page refreshes, until I manually close the drawer. I have been looking for a bug report for a few days to no avail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment