Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #10496 > unrolled thread

onKeyDown stuff

Back to article view | Back to comp.lang.javascript

Contents

  onKeyDown stuff "Mel Smith" <med_cutout_syntel@aol.com> - 2012-01-22 12:47 -0700

#10496 — onKeyDown stuff

Hi:

    In another post, I asked questions about using onKeyPress on a data 
screen to allow my sole user to navigate around many <input> fields which 
are interspersed with <textarea> fields and a few others.

    Anyway,  I've go it working now and am using onKeyDown instead of 
onKeyPress

    You may (or may not) wish to get a laugh out of the following working 
code below:

    ... and thanks for the original ideas. I learned a lot (but not enough) 
over the last several days)

 -- 
Mel Smith

******* the onKey Down code and the changing of focus done *my* way ***

var inpobjs = new Array() ;

function setfocusfields() {
var el,j=0 ;
maxtab = 0 ;
var inputs = document.getElementsByTagName("input") ;
for (var i=0;i<inputs.length;i++) {
   el = inputs[i] ;
   if (el.type == "text" && !el.readOnly) {
      el.onkeydown = focusOnElement ;
      el.onfocus = setFocusColor ;
      el.onblur = setBlurColor ;
      inpobjs.push(el.id) ;
      el.tabIndex = j++ ;
      maxtab++ ;
      }
   }
}

function focusOnElement() {
   var nkey = event.keyCode ;
   var thistab = this.tabIndex;
   var thisid = inpobjs[thistab] ;  // we may need the current id
   var nexttab = (thistab+1 < maxtab) ? thistab+1 : 0 ; // if last goto top
   var prevtab = (thistab-1 < 0) ? maxtab : thistab-1 ; // if already to, 
goto bottom
   var nextid = inpobjs[nexttab] ; // get the id of the next input text 
field
   var previd = inpobjs[prevtab] ; // get the id of the previous input text 
field

   if (nkey === 13) { // enter key
     document.getElementById(nextid).focus() ;
     return true ;
   }

   if (nkey === 40) { // down arrow key
     if (thistab <= 23) {  // then we are in one of the vertical table 
fields
      nexttab += 7     // this should move us down the table vertically
      nextid = inpobjs[nexttab] ; // get the correct id of the input text 
field
     }
     if (thistab >= 24 && thistab <= 31) {
      document.getElementById("ioccupant-1").focus()
      return true ;
      }
     document.getElementById(nextid).focus() ;
     return true ;
   }

   else if(nkey===38) { // up-arrow key
     if (thistab >= 0 && thistab <= 7) {     // don't go anywhere -- stay 
here
      previd = thisid ;
      }

     if (thistab >= 8 && thistab <= 31) {  // then we are in one of the 
vertical table fields
      prevtab -= 7     // this should move us up the table vertically
      previd = inpobjs[prevtab] ; // get the correct id of the input text 
field
     }
     document.getElementById(previd).focus() ;
     return true ;
   }

   else if(nkey===36) { // Home key -- go left or up (i.e., previous field
     document.getElementById(previd).focus() ;
     return true ;
   }

   else if(nkey===33) { // page-up key
     previd = inpobjs[0] ;
     document.getElementById(previd).focus() ;
     return true ;
   }
   else if(nkey===34) { // page-down key
      nextid = inpobjs[maxtab-1] ;
      document.getElementById(nextid).focus() ;
      return true ;
   }
   return true;
}

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

[toc] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web