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,destinati on){
if (original.getAttribute&&or iginal.val ue.length= =original. getAttribu te("maxlen gth")-1)
destination.focus()
}
function addRowToTable()
{
...
...
// From Date
var cell = row.insertCell(0);
var el = document.createElement('in put');
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','f orminput') ;
el.setAttribute('className ','forminp ut'); //IE Quirk
el.onkeypress = 'alert(test)';
//METHOD 1 Works on Mozzilla/Firefox not for IE
el.setAttribute('onKeyPres s','autota b(this,THR UDATE' + 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,T HRUDATE' + iteration + ');autoInsert(' + iteration + ')" maxlength="10">';
cell.appendChild(el);
// Thru Date
var cell = row.insertCell(1);
var el = document.createElement('in put');
el.setAttribute('type', 'text');
el.setAttribute('name', 'THRUDATE' + iteration);
el.setAttribute('id', 'THRUDATE' + iteration);
...
...
function autotab(original,destinati
if (original.getAttribute&&or
destination.focus()
}
function addRowToTable()
{
...
...
// From Date
var cell = row.insertCell(0);
var el = document.createElement('in
el.setAttribute('type', 'text');
el.setAttribute('name', 'FROMDATE' + iteration);
el.setAttribute('id', 'FROMDATE' + iteration);
el.setAttribute('size', '10');
el.setAttribute('maxLength
el.setAttribute('class','f
el.setAttribute('className
el.onkeypress = 'alert(test)';
//METHOD 1 Works on Mozzilla/Firefox not for IE
el.setAttribute('onKeyPres
//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,T
cell.appendChild(el);
// Thru Date
var cell = row.insertCell(1);
var el = document.createElement('in
el.setAttribute('type', 'text');
el.setAttribute('name', 'THRUDATE' + iteration);
el.setAttribute('id', 'THRUDATE' + iteration);
...
...
> 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..???
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('onKeyPres s',new Funstion('autotab(this,THR UDATE' + 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.
el.onkeypress = function(){alert(this.name
el.setAttribute('onKeyPres
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('onKeyPres s',new Function('autotab(this,THR UDATE' + 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('onKeyPres s', function(){autotab(this)};
Tthe second parameter can be accessed in autotab(theElem) function trough theElem.id
Or you simplify it to this:
el.setAttribute('onKeyPres s', autotab);
And access the element and its id in the aitotab() function like this:
function autotab(){
var theElem = this;
var elemId = theElem.id;
}
el.setAttribute('onKeyPres
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('onKeyPres
Tthe second parameter can be accessed in autotab(theElem) function trough theElem.id
Or you simplify it to this:
el.setAttribute('onKeyPres
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);
}
}
function myKeyPress(evt)
{
if (evt != null)
{
alert(evt.keyCode);
}
else
{
alert(event.keyCode);
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
var newfunc = new Function("autotab(this,'TH
el.onkeypress = newfunc;