Solved

Prevent page from scrolling when using arrow keys

Posted on 2004-04-27
11
875 Views
Last Modified: 2010-07-27
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
Comment
Question by:Tyzer
  • 7
  • 2
  • 2
11 Comments
 
LVL 32

Expert Comment

by:ldbkutty
ID: 10927005
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
 
LVL 32

Expert Comment

by:ldbkutty
ID: 10936751
Are you successful !?
0
 
LVL 3

Author Comment

by:Tyzer
ID: 10936960
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 12

Expert Comment

by:lil_puffball
ID: 10944294
Try using onkeydown, instead of onkeypress.

If it doesn't work, would you mind posting your full code?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10944457
never mind, I reread your question and it seems like you already do. Please post your entire code then...
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10944482
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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10944485
Oh, you should probably also add this:

onblur="noscroll=false;"
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10944539
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
 
LVL 12

Accepted Solution

by:
lil_puffball earned 250 total points
ID: 10968535
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
 
LVL 3

Author Comment

by:Tyzer
ID: 10996637
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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10999318
Glad to help. Is there any reason for the B though?
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

838 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question