Solved

Prevent page from scrolling when using arrow keys

Posted on 2004-04-27
11
866 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now