[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


DOM onkeypress in IE

Posted on 2005-05-10
Medium Priority
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

ID: 13968900
try this

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

Expert Comment

ID: 13968951
> 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..???


Expert Comment

ID: 13969749
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.

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 13969825
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;

LVL 23

Expert Comment

ID: 13969833
e.g. food for thought

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

Accepted Solution

NETTY4 earned 2000 total points
ID: 13969942
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();


Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

872 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