DOM onkeypress in IE

I can not seem to get the OnKeyPress method to work on IE using DOM at all It seems to work fine for Mozilla compat browsers.  I also tried using innerHTML method for IE, which gives me an error that the second input box does not exsist.  I shortened the code below a bit for readability but basically what it's doing is adding a row to a table full of cells each with one input box and I want the onkeypress method to tab to the next input box when the user has met the maxlength of the current input box.



function autotab(original,destination){
      if (original.getAttribute&&original.value.length==original.getAttribute("maxlength")-1)
      destination.focus()
}

function addRowToTable()
{
      ...
        ...
      // From Date
      var cell = row.insertCell(0);
      var el = document.createElement('input');
      el.setAttribute('type', 'text');
      el.setAttribute('name', 'FROMDATE' + iteration);
      el.setAttribute('id', 'FROMDATE' + iteration);
      el.setAttribute('size', '10');
      el.setAttribute('maxLength','10'); //IE Quirk, "L" must be capitalized
      el.setAttribute('class','forminput');
      el.setAttribute('className','forminput'); //IE Quirk
      el.onkeypress = 'alert(test)';

        //METHOD 1 Works on Mozzilla/Firefox not for IE
      el.setAttribute('onKeyPress','autotab(this,THRUDATE' + iteration + ');');

        //METHOD 2 Layout is correct in both browsers,
       /// but function throws "object THRUDATE does not exsist"
      cell.innerHTML = '<input type="text" name="FROMDATE"' + iteration + ' id="FROMDATE"' + iteration + ' size="10" class="forminput" onKeyPress="autotab(this,THRUDATE' + iteration + ');autoInsert(' +  iteration + ')" maxlength="10">';

      cell.appendChild(el);

      
      // Thru Date
      var cell = row.insertCell(1);
      var el = document.createElement('input');
      el.setAttribute('type', 'text');
      el.setAttribute('name', 'THRUDATE' + iteration);
      el.setAttribute('id', 'THRUDATE' + iteration);
      ...
        ...
LVL 3
steve918Asked:
Who is Participating?
 
NETTY4Commented:
Uhps, now I see the second parameter is NOT the same element!

Then you have to use this version:
   el.setAttribute('onKeyPress',new Function('autotab(this, "THRUDATE' + iteration + '" );'));

Or you att some attribute for the next tab element to the previous element:

   el.setAttribute('nextField', 'THRUDATE' + iteration );
   el.setAttribute('onKeyPress', autotab);

and fetch the next field name like this:

function autotab(){
  var theElem = this;
  var theForm = theElem.form;
  var nextFieldName = theElem.getAttribute("nextField");
  var nField = theForm[nextFieldName];
  if(theElem.value.length>5) nField.focus();
}










0
 
archrajanCommented:
try this

       var newfunc = new Function("autotab(this,'THRUDATE' + iteration);");
 el.onkeypress = newfunc;
0
 
davidlars99Commented:
> el.onkeypress = 'alert(test)';.....

it has two errors: missing single quotes and you have to do it like this

el.onkeypress = new Function(){ alert('test') };



>  but function throws "object THRUDATE does not exsist"...

what's THRUDATE..???

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
NETTY4Commented:
Here my proposals:

  el.onkeypress = function(){alert(this.name)};


  el.setAttribute('onKeyPress',new Funstion('autotab(this,THRUDATE' + iteration + ');'));


Also be aware the the element name can be set in IE, but is not rendered and not accessible before submitting the page.
So better use the element id to fetch the element, because element id is accessible after being set.

0
 
NETTY4Commented:
Sorry, typo:

el.setAttribute('onKeyPress',new Function('autotab(this,THRUDATE' + iteration + ');'));


And you need not to pass the second parameter (which is anyway not valid in non-IE browsers: THRUDATE1)

Better define it like this:

el.setAttribute('onKeyPress', function(){autotab(this)};  

Tthe second parameter can be accessed in autotab(theElem) function trough theElem.id

Or you simplify it to this:

el.setAttribute('onKeyPress', autotab);

And access the element and its id in the aitotab() function like this:

function autotab(){
  var theElem = this;
  var elemId = theElem.id;
}





 
0
 
b1xml2Commented:
e.g. food for thought

function myKeyPress(evt)
{
  if (evt != null)
  {
    alert(evt.keyCode);
  }
  else
  {
   alert(event.keyCode);
  }
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.