4

If I have a div with the style overflow: hidden; I found that there are times when keyboard actions can cause the div to scroll anyway. And since there are no scrollbars, there is really no way to make the div go back to its original state. Is anything I should do in addition to specifying the style to prevent this?

For example when you select the L with the mouse (in the fiddle) and after that you press the down arrow key while holding down shift (i.e. expanding the selection).

http://jsfiddle.net/PeeHaa/H34mM/

Or another scenario is when there is a textarea in the div: http://jsfiddle.net/h6Bhb/1/

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
user823527
  • 3,644
  • 17
  • 66
  • 110

2 Answers2

1

A simple solution would be to disable text-select in the relevant element. Therefor preventing the possibility to use the arrow keys to select more..

To prevent tekst select you need to event.preventDefault() in the mousedown event with JS.

For your fiddle that could look like this in modern standards compliant browsers:

// give the div an id
document.getElementById('div').addEventListener('mousedown', function(e) {
    e.preventDefault();
}, false);​

Edit

Or as @JimThomas pointed out in the comments you can disable text select using CSS, ofcourse this doesn't enjoy as much support as the JS solution. How to disable text selection highlighting using CSS?

I couldn't think of a more graceful or more complete (this doesn't solve problems you might have with inputs) solution, and I'm not sure if there even is one...

Community
  • 1
  • 1
sg3s
  • 9,411
  • 3
  • 36
  • 52
  • 2
    A pure css example to disable selection is demonstrated here, but is based on browse-specific styles. Tried it out in your first fiddle and it seemed to work. http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting Edit: this doesn't help with the textarea unless you disable it. – Jim Thomas May 05 '12 at 19:17
  • @JimThomas I didn't know those CSS properties :) – sg3s May 05 '12 at 19:29
  • 1
    that's probably because they're not part of the standard :) – Jim Thomas May 05 '12 at 19:35
0

Add this to your div CSS:

-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; /* IE10+ */
user-select: none;

Does not work in < IE10 or Textarea, but I don't believe anything will prevent the textarea scenario unless you disable the textarea itself to prevent selection.

... or go with JS solution.

kmiyashiro
  • 2,249
  • 14
  • 15
  • Doesn't fix the second scenario, neither does mine, but you should at least mention that. – sg3s May 05 '12 at 19:36