• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 899
  • Last Modified:

Prevent page from scrolling when using arrow keys

Hi ya all,
i'm creating a custom made selectbox on a webpage, made with javascript. i've also added functionality to scroll through the selectbox-options with the arrow keys on my keyboard. this was easy, just had to capture the onkeydown event and add some functionality. After this i also made it possible to select an option from my pulldown / selectbox by pressing the Enter/Return key. And because i also added 'window.event.cancelBubble=true' to this function, my form wont be submitted when i use the Enter/Return key. great ! But now comes the hard part.. the form has grown bigger, so the page that this customselect is on, has a scrollbar..  now when i move through the options of my customselect with the arrow keys, the page also starts scrolling up and down .. (very unpleasant ;)) , i've tried to add a cancelbubble to the part where i capture and handle the arrowkeys but this doesnt work..
here is a bit of my code:

function fnCheckArrowKeys(){
    var keyCode = event.keyCode;
    if (keyCode == 13){
                fnSetCustomSelectValueByReturn();
                window.event.cancelBubble=true;        // << this works for preventing the form form being submitted
                return false;
     }
     if (keyCode == 40){
      fnMoveSelectedIndex(1);
      window.event.cancelBubble=true;     // << this doenst work for preventing the page from scrolling !!!!!
      return false;
      }
}

does anyone have an idea for preventing my page from scrolling when using these arrow keys ?
0
Tyzer
Asked:
Tyzer
  • 7
  • 2
  • 2
1 Solution
 
ldbkuttyCommented:
Use property

OnKeyDown: TKeyEvent;

Description

Occurs when a user presses any key while the grid has focus.
The OnKeyDown handler can respond to all keyboard keys, including function keys and pressed mouse buttons.

The Key parameter is the key on the keyboard. For non-alphanumeric keys(Arrow keys in your case), use WinAPI virtual key codes to determine the key pressed.

Symbol         Hexa-decimal value        Mouse/KB Equilent
---------        -----------------------       ----------------------
VK_LEFT              25                          LEFT ARROW key
VK_UP                 26                          UP ARROW key
VK_RIGHT            27                          RIGHT ARROW key
VK_DOWN            28                          DOWN ARROW key

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wceui40/html/cerefvirtualkeycodes.asp

Hope this helps...
0
 
ldbkuttyCommented:
Are you successful !?
0
 
TyzerAuthor Commented:
Sorry dude, but i don't see how this msdn link could be helpful.. it just repeats what i already knew about capturing keys with the onkeydown event.. and which values to capture.
What i need is information about canceling the page-scrolling which also happens when i push the up or downarrow keys.. this makes my form scroll up and down while i'm just browsing through my custom-selectbox options, and i'd like to prevent that.
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
lil_puffballCommented:
Try using onkeydown, instead of onkeypress.

If it doesn't work, would you mind posting your full code?
0
 
lil_puffballCommented:
never mind, I reread your question and it seems like you already do. Please post your entire code then...
0
 
lil_puffballCommented:
Ok, try this:

Put this in the script tags somewhere:

var noscroll;
document.onkeydown=function(){if(noscroll&&(event.keyCode==40||event.keyCode==38)){return false;}}

And put an onfocus event handler in the div or whatever you're using as the container:

<div onfocus="noscroll=true;" onkeydown="fnCheckArrowKeys();">
0
 
lil_puffballCommented:
Oh, you should probably also add this:

onblur="noscroll=false;"
0
 
lil_puffballCommented:
Also, you should add

document.onclick=function(){noscroll=false;}

somewhere, and add this when you click on the select:

setTimeout("noscroll=true",10);



Here is a working example:

<style>
.option{background-color:ddeeff;width:100%;}
.selectOpted{background-color:99ccff;}
</style>

<script>
var noscroll,selectOpted=-1;

function move(sel,k){
  if(k!=38&&k!=40){return;}
  clearAll(sel);
  if(k==40){
    selectOpted++;if(selectOpted>=sel.childNodes.length){selectOpted=0;}
  }else if(k==38){
    selectOpted--;if(selectOpted<=-1){selectOpted=sel.childNodes.length-1;}
  }
  sel.childNodes[selectOpted].className="selectOpted";
}
function clearAll(sel){
  for(i=0;i<sel.childNodes.length;i++){
    sel.childNodes[i].className="option";
  }
}
function selectOpt(opt,n){
  clearAll(opt.parentNode);
  opt.className="selectOpted";
  selectOpted=n;
  setTimeout("noscroll=true",10);
}

document.onkeydown=function(){if(noscroll&&(event.keyCode==40||event.keyCode==38)){return false;}}
document.onclick=function(){noscroll=false;}
</script>


text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>

<div style="border-width:1;border-color:black;border-style:solid;width:100;" onfocus="noscroll=true;" onblur="noscroll=false;" onkeydown="move(this,event.keyCode);">
<div class=option onclick="selectOpt(this,0);">A</div>
<div class=option onclick="selectOpt(this,1);">B</div>
<div class=option onclick="selectOpt(this,2);">C</div>
<div class=option onclick="selectOpt(this,3);">D</div>
<div class=option onclick="selectOpt(this,4);">E</div>
<div class=option onclick="selectOpt(this,5);">F</div>
</div>

text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>
text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>
text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>text<p>
0
 
lil_puffballCommented:
A simpler method, which only works in IE though, is using event.returnValue=false instead of return false:

function fnCheckArrowKeys(){
    var keyCode = event.keyCode;
    if (keyCode == 13){
                fnSetCustomSelectValueByReturn();
                window.event.cancelBubble=true;        // << this works for preventing the form form being submitted
                return false;
     }
     if (keyCode == 40){
     fnMoveSelectedIndex(1);
     window.event.cancelBubble=true;     // << this doenst work for preventing the page from scrolling !!!!!
     window.event.returnValue=false;
      }
}
0
 
TyzerAuthor Commented:
Thanks man! for me this worked fine. We're just developing apps for Internet Explorer here, so this IEonly-code is no  problem at all!
0
 
lil_puffballCommented:
Glad to help. Is there any reason for the B though?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 7
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now