Link to home
Start Free TrialLog in
Avatar of steve918
steve918

asked on

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);
      ...
        ...
Avatar of archrajan
archrajan

try this

       var newfunc = new Function("autotab(this,'THRUDATE' + iteration);");
 el.onkeypress = newfunc;
> 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..???

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.

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;
}





 
e.g. food for thought

function myKeyPress(evt)
{
  if (evt != null)
  {
    alert(evt.keyCode);
  }
  else
  {
   alert(event.keyCode);
  }
}
ASKER CERTIFIED SOLUTION
Avatar of NETTY4
NETTY4

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial