Assigning keyCode a value in a document containing a form

Discussion in 'Javascript' started by WilliamRLinden@gmail.com, Mar 7, 2006.

  1. Guest

    Hi world! we are pretty new to JavaScript and have been
    struggling for now 2 days on this problem ... We would
    appreciate mercy if anyone can give us some.

    Basically we are trying to simulate the tab key when the
    down arrow key is pressed. (we know there are other way
    to control focus flow but we use a lot of dynamic jsp fields,
    that will make the flow control a nightmare, we just want
    basic tabbing from the arrow key)

    1)We are able to capture a onkeydown event and reasign it with another
    key value with no problem within an html document without a form.

    example:

    var ieKey = event.keyCode;

    if (ieKey == 40) {
    event.keyCode = 9;
    }



    however as soon as we insert a form tag in the document, this stops
    functioning.
    The asignment seems to be fine as an alert clearly shows, but the
    instruction
    seems to be ignored.

    Find below the working (with no form) and non working script (with a
    form).
    You should be able to just cut and paste the code.


    Without form (works)
    =============
    <html>
    <head>

    <title>arrow keys test 2</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">


    <script>

    function onLoadInit(){
    document.onkeydown = keyDown;
    }



    function keyDown(e) {

    var ieKey = event.keyCode;

    if (ieKey == 38) {

    alert("up arrow");
    }



    if (ieKey == 40) {

    alert("down arrow");
    event.keyCode = 9;
    alert(event.keyCode);
    }
    }

    </script>
    </head>



    <body onload="onLoadInit()" >



    <center>
    <strong><font size="+2">no form good</font></strong>
    </center>


    <BR> <input name="A" type="text" size="6">
    <BR> <input name="B" type="text" size="6">
    <BR> <input name="D" type="text" size="6">
    <BR> <input name="E" type="text" size="6">
    <BR> <input name="F" type="text" size="6">


    <center><a href="balls.html">View Document</a></center>
    <center><a href="balls.html">View Document</a></center>
    <center><a href="balls.html">View Document</a></center>



    </body>
    </html>





    With form (doesn't work)
    ==========


    <html>
    <head>

    <title>arrow keys test 2</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">


    <script>

    function onLoadInit(){
    document.onkeydown = keyDown;
    }



    function keyDown(e) {

    var ieKey = event.keyCode;

    if (ieKey == 38) {

    alert("up arrow");
    }



    if (ieKey == 40) {

    alert("down arrow");
    event.keyCode = 9;
    alert(event.keyCode);
    }
    }

    </script>
    </head>



    <body onload="onLoadInit()" >

    <form name="form1" method="get">


    <center>
    <strong><font size="+2">arrows 5</font></strong>
    </center>


    <BR> <input name="A" type="text" size="6">
    <BR> <input name="B" type="text" size="6">
    <BR> <input name="D" type="text" size="6">
    <BR> <input name="E" type="text" size="6">
    <BR> <input name="F" type="text" size="6">


    <center><a href="balls.html">View Document</a></center>
    <center><a href="balls.html">View Document</a></center>
    <center><a href="balls.html">View Document</a></center>

    </form>


    </body>
    </html>
    , Mar 7, 2006
    #1
    1. Advertising

  2. Jonas Raoni Guest

    wrote:
    > Basically we are trying to simulate the tab key when the
    > down arrow key is pressed. (we know there are other way
    > to control focus flow but we use a lot of dynamic jsp fields,
    > that will make the flow control a nightmare, we just want
    > basic tabbing from the arrow key)
    >
    > event.keyCode = 9;


    If nothing changed, this works just on IE, so find another way, take a
    look here: <URL:http://jsfromhell.com/forms/auto-tab>, with a little
    modification, it will work for you.


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
    Jonas Raoni, Mar 7, 2006
    #2
    1. Advertising

  3. Jonas Raoni Guest

    Jonas Raoni wrote:
    > wrote:
    > > Basically we are trying to simulate the tab key when the
    > > down arrow key is pressed.

    >
    > If nothing changed, this works just on IE, so find another way, take a
    > look here: <URL:http://jsfromhell.com/forms/auto-tab>, with a little
    > modification, it will work for you.


    Sorry, I've posted the wrong url ^^

    <URL:http://jsfromhell.com/forms/enter-as-tab>


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
    Jonas Raoni, Mar 7, 2006
    #3
  4. SirWilliam Guest

    Thanks Jonas.

    I had a look the at URL mentioned, pretty close to what we needed but
    didn't realy shed any light on why our script didn't work when using a
    form.

    Now, just in case this might one day help some one else, here is how we
    finally solved the problem:

    The true purpose of us needing the script was to capture arrow key
    presses and then to use these to navigate between the elements on a web
    page, instead of using the tab and shift+tab key to tediously navigate
    from element to element in the specified tab order.

    In the end I changed the approach completely and instead of simulating
    tab key presses I created a virtual grid with each element (html tag)
    to be navigated to/from containing X and Y coordinates as two
    additional parameters in the tag declaration. Then when an arrow key
    event is captured I simply focus directly on the next element using the
    coordinate system to identify which tag should receive the focus next.


    ***************************************************************
    Here is the JavaScript (I used a file called arrowNav.js)

    ***************************************************************

    var Xval,Yval,xMaxArray;
    var yMax = 0;


    function setXY() {

    Xval = document.activeElement.x;
    Yval = document.activeElement.y;
    }



    function getMax() {

    //Work Out maximum Y
    //------------------
    for (var i=0;i < document.all.length;i++) {
    if (document.all.y > yMax) {
    yMax = document.all.y;
    }
    }

    xMaxArray = new Array(yMax+1);
    for (var i=0;i<(yMax+1);i++)
    xMaxArray = 0;


    //Work Out maximum X's
    //--------------------
    for (var i=0;i < document.all.length;i++) {
    if (document.all.x > xMaxArray[document.all.y]) {
    xMaxArray[document.all.y] = document.all.x;
    }
    }

    }



    function handleKey(evt) {

    var ieKey;

    //if (window.Event) ieKey = evt.which;
    //else ieKey = event.keyCode;

    ieKey = event.keyCode;


    //Move Up
    //-------
    if (ieKey == 38) {

    // Make sure we or not as high as we can go
    //-----------------------------------------
    if (Yval > 1) {
    Yval--;

    // If we are moving to a row with less elements i.e less X
    coordinates
    // make sure we re-adjust x grid value to reflect the max for that
    row
    //---------------------------------------------------------------------
    if (Xval > xMaxArray[Yval]) {
    Xval = xMaxArray[Yval];
    }

    for (var i=0;i < document.all.length;i++)
    if ((document.all.x == Xval) && (document.all.y ==
    Yval)) {
    //alert(document.all.name)
    document.all.focus();
    }
    }
    }


    //Move Down
    //---------
    if (ieKey == 40) {

    // Make sure we or not as low as we can go
    //-----------------------------------------
    if (Yval < yMax) {
    Yval++;


    // If we are moving to a row with less elements i.e less X
    coordinates
    // make sure we re-adjust x grid value to reflect the max for that
    row
    //---------------------------------------------------------------------
    if (Xval > xMaxArray[Yval]) {
    Xval = xMaxArray[Yval];
    }

    for (var i=0;i < document.all.length;i++)
    if ((document.all.x == Xval) && (document.all.y ==
    Yval)) {
    //alert(document.all.name)
    document.all.focus();
    }
    }
    }

    //Move Right
    //----------
    if (ieKey == 39) {

    //alert(document.all['T1'].type);


    if (!((document.activeElement.type == "text") &&
    (document.activeElement.value != ""))) {

    // Make sure we or not as far right as we can go
    //----------------------------------------------
    if(Xval < xMaxArray[Yval]) {
    Xval++;

    for (var i=0;i < document.all.length;i++)
    if ((document.all.x == Xval) && (document.all.y ==
    Yval)) {
    //alert(document.all.name)
    document.all.focus();
    }
    }
    }
    }



    //Move Left
    //---------
    if (ieKey == 37) {


    if (!((document.activeElement.type == "text") &&
    (document.activeElement.value != ""))) {

    // Make sure we or not as far left as we can go
    //---------------------------------------------
    if (Xval > 1) {
    Xval--;

    for (var i=0;i < document.all.length;i++)
    if ((document.all.x == Xval) && (document.all[i].y ==
    Yval)) {
    //alert(document.all[i].name)
    document.all[i].focus();
    }
    }
    }
    }

    return fals;
    }

    // Add main document event Listener
    document.onkeydown=handleKey;








    **************************************************
    AN HTML FILE USING THE SCRIPT

    **************************************************

    <html>
    <head>

    <title>God damn Arrows</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">


    <!-- Specify arrowNav.js as the file containing the script -->
    <script src="arrowNav.js"> </script>

    </head>






    <!-- Call getMax() function on body load to ensure script can
    calculate
    Maximum X,Y grid values ------------------------------------------->

    <body onload="getMax()">

    <form name="form1">
    <center>
    <font size="+2">The <b>ultimate</b> arrow key TesT ... ever</font>
    </center>

    <BR> <center><a name="L1" x="1" y="1" href="balls.html">Link1 (1,1)</a>

    <BR><BR> <input name="T1" value="Text1 (1,2)" x="1" y="2" type="text"
    onfocus="setXY()">
    <input name="T2" value="Text2 (2,2)" x="2" y="2" type="text"
    onfocus="setXY()">



    <BR><BR> <a name="L2" x="1" y="3" href="balls.html" onfocus="setXY()">
    Link2 (1,3)</a> &nbsp some irelavant text &nbsp
    <a name="L3" x="2" y="3" href="balls.html" onfocus="setXY()"> Link3
    (2,3)</a> &nbsp
    <a name="L4" x="3" y="3" href="balls.html" onfocus="setXY()"> Link4
    (3,3)</a> &nbsp
    <a name="L5" x="4" y="3" href="balls.html" onfocus="setXY()"> Link5
    (4,3)</a>


    <BR> <a name="L6" x="1" y="4" href="balls.html" onfocus="setXY()">
    Link6 (1,4)</a> &nbsp some irelavant text &nbsp
    <a name="L7" x="2" y="4" href="balls.html" onfocus="setXY()"> Link7
    (2,4)</a> &nbsp
    <a name="L8" x="3" y="4" href="balls.html" onfocus="setXY()"> Link8
    (3,4)</a> &nbsp
    <a name="L9" x="4" y="4" href="balls.html" onfocus="setXY()"> Link9
    (4,4)</a>


    <BR><BR> <input name="T3" value="Text3 (1,5)" x="1" y="5" type="text"
    onfocus="setXY()">

    <BR><BR> Some more useless text

    <BR><BR> <input name="T4" value="Text4 (1,6)" x="1" y="6" type="text"
    onfocus="setXY()">
    <input name="T5" value="Text5 (2,6)" x="2" y="6" type="text"
    onfocus="setXY()">



    </center>
    </form>
    </body>
    </html>



    It looks a little but chaotic, but thats just the text wrapping, copy
    and paste into a proper editor and it should all come out a bit
    clearer.

    With a bit of luck this might actually save the universe one day.
    And remember:
    Beer is not the answer, it is the question...the answer is YES!!!!

    ciao
    will[/i][/i][/i]
    SirWilliam, Mar 9, 2006
    #4
  5. SirWilliam Guest

    PS: I take what I said about the wrapping being sorted in a proper
    editor back...
    SirWilliam, Mar 9, 2006
    #5
  6. Jonas Raoni Guest

    SirWilliam wrote:
    > Thanks Jonas.
    >
    > I had a look the at URL mentioned, pretty close to what we needed but
    > didn't realy shed any light on why our script didn't work when using a
    > form.


    Ok

    > <input name="T2" value="Text2 (2,2)" x="2" y="2" type="text"> onfocus="setXY()">


    Instead of setting this manually, you can make it automatic, by keeping
    track of all the inputs offsets, then you just need to check who's the
    nearest from the current input offset or create your grid dinamically
    (if your page layout doesn't change while filling the fields, that would
    be the best solution) ;]

    getOffset = function(o){
    for(var r = {x: o.offsetLeft, y: o.offsetTop, h: o.offsetHeight, w:
    o.offsetWidth};
    o = o.offsetParent; r.x += o.offsetLeft, r.y += o.offsetTop);
    return r;
    }


    --
    Now with alcohol <URL:http://youtube.com/watch?v=lnQTZxqxc10> =X
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
    Jonas Raoni, Mar 9, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Marvin Massih

    "Keycode DLL not found or invalid keycode"

    Marvin Massih, Dec 31, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    2,116
    Marvin Massih
    Dec 31, 2004
  2. win
    Replies:
    2
    Views:
    333
    Steven Cheng [MSFT]
    May 20, 2008
  3. Robert Nurse
    Replies:
    1
    Views:
    134
    Robert Nurse
    Jul 1, 2004
  4. weston
    Replies:
    19
    Views:
    215
  5. weston
    Replies:
    1
    Views:
    238
    Richard Cornford
    Sep 22, 2006
Loading...

Share This Page