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

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

tabIndex to Input Object ??

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

Contents

  tabIndex to Input Object ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2013-07-16 13:53 -0600
    Re: tabIndex to Input Object ?? JJ <duh@nah.meh> - 2013-07-17 05:06 +0700
      Re: tabIndex to Input Object ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2013-07-16 18:36 -0600
        Re: tabIndex to Input Object ?? JJ <duh@nah.meh> - 2013-07-17 10:44 +0700
          My (so-called) solution "Mel Smith" <med_cutout_syntel@aol.com> - 2013-07-18 09:50 -0600

#20681 — tabIndex to Input Object ??

Hi:

    In my wanderings thru the morass of my various tables,  I have set the 
tabIndex for all those input text fields in a particular table (mytable) 
that I wish to be part of my editing sequence.  The range of these indexes 
is from 201 thru approx 260.

Question:

    Given a particular computed 'newtabIndex', how do I translate that new 
index into the associated new object. ?

    i.e., What should the body of this next function be please ??

    nextobj = convertToObject(mytable,newtabIndex) {/* ???*/ }

 Thanks

-- 
Mel Smith

[toc] | [next] | [standalone]

#20682

On Tue, 16 Jul 2013 13:53:11 -0600, Mel Smith wrote:
>     In my wanderings thru the morass of my various tables,  I have set the 
> tabIndex for all those input text fields in a particular table (mytable) 
> that I wish to be part of my editing sequence.  The range of these indexes 
> is from 201 thru approx 260.
> 
> Question:
> 
>     Given a particular computed 'newtabIndex', how do I translate that new 
> index into the associated new object. ?
> 
>     i.e., What should the body of this next function be please ??
> 
>     nextobj = convertToObject(mytable,newtabIndex) {/* ???*/ }

AFAIK, DOM doesn't provide a property/function to list all focusable
elements, so you'll have to manually search it. One example is to use
"document.querySelector" (using CSS selector). e.g.:

function convertToObject(elementId, tabIndex) {
  //return null if not found
  return document.QuerySelector(
    '#' + elementId + ' input[tabindex="' + tabIndex + '"]'
  );
}
var ele = convertToObject("mytable", 123);
if (ele) {
  console.log(ele.value);
} else {
  console.log("Element not found");
}

[toc] | [prev] | [next] | [standalone]

#20683

JJ said:

>>     nextobj = convertToObject(mytable,newtabIndex) {/* ???*/ }
>
> AFAIK, DOM doesn't provide a property/function to list all focusable
> elements, so you'll have to manually search it. One example is to use
> "document.querySelector" (using CSS selector). e.g.:
>
> function convertToObject(elementId, tabIndex) {
>  //return null if not found
>  return document.QuerySelector(
>    '#' + elementId + ' input[tabindex="' + tabIndex + '"]'
>  );
> }
> var ele = convertToObject("mytable", 123);
> if (ele) {
>  console.log(ele.value);
> } else {
>  console.log("Element not found");
> }

Hi JJ:

    I should have said that each of these text input boxes are part of the 
cells of a table, and have no 'id' property (yet).  This is because rows can 
be added and deleted, and the input elements in each new row would have to 
be given unique ids.

    But after a row is inserted or deleted, I *do* run a function to reset 
the tabIndexes of each of the input text boxes to start at 201 and proceed 
upto approx 260.

    My mind 'blows up' when I try to think of a way to assign them all 
unique IDs so that my editing function will know how to move 
Up/Down/TopRow/BottomRow, etc -- with the input of an Up-Arrow,Dn-Arrow, 
PageUp, PageDn, etc, etc, Carriage Return, etc.

    Thanks for coming to my rescue -- again !  I'll think more on it and try 
to use the QuerySelector.

-Mel

[toc] | [prev] | [next] | [standalone]

#20684

On Tue, 16 Jul 2013 18:36:54 -0600, Mel Smith wrote:
>     I should have said that each of these text input boxes are part of the 
> cells of a table, and have no 'id' property (yet).  This is because rows can 
> be added and deleted, and the input elements in each new row would have to 
> be given unique ids.

I should also have mentioned that the "elementId" parameter of
convertToObject function should be the table's ID, not the INPUT's ID.

>     But after a row is inserted or deleted, I *do* run a function to reset 
> the tabIndexes of each of the input text boxes to start at 201 and proceed 
> upto approx 260.
> 
>     My mind 'blows up' when I try to think of a way to assign them all 
> unique IDs so that my editing function will know how to move 
> Up/Down/TopRow/BottomRow, etc -- with the input of an Up-Arrow,Dn-Arrow, 
> PageUp, PageDn, etc, etc, Carriage Return, etc.

You may want to keep track of those INPUT creation/deletion in an object.
e.g.:
var tblInputs = {};

On row creation, after INPUT creation, e.g.:
var ele = createTheInput(tabIndex);
tblInputs[tabIndex] = ele;

On row deletion, before any deletion, e.g.:
var inputs = row.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++) {
  if ((inputs[i].type = "text") && (inputs[i].tabIndex > 0)) {
    delete tblInputs[ inputs[i].tabIndex ];
  }
}

Then getting the INPUT element from a tab index would be, e.g.:
var input = tblInputs[tabIndex];
if (input) {
  console.log(input.value);
}

To clear all INPUT values, e.g.:
for (var i in tblInputs) {
  tblInputs[i].value = "";
}

Are you trying to create an Excel-like table?

[toc] | [prev] | [next] | [standalone]

#20697 — My (so-called) solution

JJ said:

> Are you trying to create an Excel-like table?

Hi JJ:

    I 'may' be treating this like excel -- but I've never used Excel, except 
to dump stuff into a database, but YES, I wish to create an easily navigable 
and editable table.


    To review:

    -    I have a 13-column table with the six columns on the far right 
easily traversible and 'editable'.
    -    The number of rows is variable and unpredictable and modifiable by 
the user.
    -    Currently, there are approx 19000+ pages that are available for 
editing.
    -    Column 1 on the far left of the data rows is a button that says: 
'Delete this Row'.
    -    Column 1 in the header row has a button that says 'Add a New Row'.
    -    Columns 2 thru 7 are readonly and mirror the editable columns 8 
thru 13.
    -    All editable cells have a tabIndex with the root index at 201 and 
extending
          left to right and then down thru the rows.
    -    Every time a row is inserted or deleted, I rebuild the tabIndexes 
for all editable cells.
    -    I also build /rebuild two arrays (1)- Holds editable objects, and 
(2) Holds the associated tabIndex for the Object
    -    I access the index array (2) looking for the next tabIndex, then 
pick out the associated object to focus on next.

    I want to have my editable cells easily navigable thru using the 
following keys: <tab><shift-tab>,<enter>,
    <home>, <end>, <PgUp>,<PgDn>, <Up-Arrow>,<Down-Arrow>.

    On each keydown, I 'listen' for these movement keys above, then I access 
the two functions shown below:

    Finally, this is working fine right now, and I don't need IDs to 
navigate

    My next step is to validate the input values in each of the 6 editable 
columns. I'll do this *whenever* the user leaves an editable cell

Thanks for your guidance !

-Mel Smith


******************************************
function getnextobj(elindex,elname,nextdir,currobj) {
var nextindex,nextobj,nval,latleftcol,latrightcol ;
nextobj = currobj ; // default object
nextindex = elindex ;

// un-declared vrbls below are defined at the global level for
// other functins to access

// now search thru the aobjs and aindexes for the *next* index
switch (nextdir) {
   case "goup" :
      nextindex = elindex - numcols ;
      break ;
   case "godown" :
      nextindex = elindex + numcols ;
      break ;
   case "gofwd" :
      nextindex = elindex + 1 ;
      break ;
   case "gobak" :
      nextindex = elindex - 1 ;
      break ;
   case "gohome" :
      while (nextindex > mintab) {  // move left to first column
         nval = nextindex - (mintab-1) // e.g., 210 - (201-1) is 10
         latleftcol = ((nval % numcols) === 1 ) ? true : false ;
         if (latleftcol) break ;
         nextindex-- ;
         }
      break ;
   case "goend" :
      while (nextindex < maxtab) {  // move right to last column
         nval = nextindex - (mintab-1) // e.g., 210 - (201-1) is 10
         latrightcol = ((nval % numcols) === 0 ) ? true : false ;
         if (latrightcol) break ;
         nextindex++ ;
         }
      break ;
   case "gopgup" :
      while (nextindex >= (mintab+numcols) ) {
         nextindex -= numcols ;
      }
      break ;
   case "gopgdn" :
      while (nextindex <= (maxtab-numcols) ) {
         nextindex += numcols ;
      }
      break ;
   }
   if (nextindex < mintab || nextindex > maxtab) return nextobj ;


   nextobj = srchobjs(nextindex,nextobj) ;   // using default nextobj
   return nextobj ;
}

function srchobjs(nindex,oldobj) {
var i,nextobj ;
var nlen = aobjs.length ;

for (i=0;i < nlen;i++) { // loop for next index to focus on
   if (aindexes[i] === nindex) {
      nextobj = aobjs[i] ; // get the object with the correwct index
      return nextobj ;  // this is the next object to focus on
      }
   }
return oldobj ;
}

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


 

[toc] | [prev] | [standalone]

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

csiph-web