prevent scrolling with arrow keys

Question

how can i prevent a html page from scrolling when arrow keys are pressed if a iframe inside it is focused?

im gettting this error in chrome

The iframe is focused, i know its focused. the parent scrolls anyway.

Answer 1

The following code inside the iframe document will prevent it from scrolling:

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

Answer 2

This works except IE:

window.top.document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

Answer 3

You can prevent scrolling with the arrow keys using the following code:

var objImage= null;

            function getKeyAndMove(e){

            var idtestor = document.getElementById('idPlacer2').value; 
                objImage=  document.getElementById(idtestor);               
                objImage.style.position='relative';


                var key_code=e.which||e.keyCode;
                switch(key_code){
                    case 37: //left arrow key
                        moveLeft();
e.preventDefault(); 
                        break;
                    case 38: //Up arrow key
                        moveUp();
e.preventDefault(); break;
                        break;
                    case 39: //right arrow key
                        moveRight();
e.preventDefault(); 
                        break;
                    case 40: //down arrow key
                        moveDown();
e.preventDefault(); break;
                        break;                      
                }
            }
            function moveLeft(){
                objImage.style.left=parseInt(objImage.style.left)-5 +'px';
window.scrollBy(-5, 0);
            }
            function moveUp(){
                objImage.style.top=parseInt(objImage.style.top)-5 +'px';
window.scrollBy(0, -5);
            }
            function moveRight(){
                objImage.style.left=parseInt(objImage.style.left)+5 +'px';
window.scrollBy(5, 0);
            }k`a`
            function moveDown(){
                objImage.style.top=parseInt(objImage.style.top)+5 +'px';
window.scrollBy(0, 5);
            }

Answer 4

This code does the trick:

JavaScript

<script type="text/javascript">
  function focusOnIframe(iFrameID) {
    if (frames[iFrameID]!=undefined)
      frames[iFrameID].focus(); // Works in all browser, except Firefox
    else
      document.getElementById(iFrameID).focus();  // Works in Firefox
  }
</script>

HTML (example)

<input type="button" id="setfocus" value="Set focus" onclick="focusOnIframe('myiframe')" />

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

<iframe id="myiframe" src="yourpage.html"></iframe>

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

I've tested it in Firefox 3.6.6, Iron 5.0.380, Opera 10.60, IE 6 and IE 8.