DOM onkeypress in IE

Posted on 2005-05-10
Last Modified: 2008-01-09
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)

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('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">';


      // 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);
Question by:steve918
    LVL 25

    Expert Comment

    try this

           var newfunc = new Function("autotab(this,'THRUDATE' + iteration);");
     el.onkeypress = newfunc;
    LVL 13

    Expert Comment

    > 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..???

    LVL 8

    Expert Comment

    Here my proposals:

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

      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.

    LVL 8

    Expert Comment

    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

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

    LVL 23

    Expert Comment

    e.g. food for thought

    function myKeyPress(evt)
      if (evt != null)
    LVL 8

    Accepted Solution

    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();


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    A common challenge, or question, when working with two calendar dates is: What is the difference between the specified days? As is frequently the case, the answer is: It depends... What kind of difference do you want? Given two date obje…
    This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now