Member Avatar for treyk4

I'm working a basic layout for a database application, and I'm having some issues with giving a text input focus in Internet Explorer versions 6 and 7. If you'll look at the webpage I'm currently working on (http://persuasionarmy.org/ADBi/) using IE 6 or 7, and you press Ctrl+Alt+A or Ctrl+Alt+S, you'll see a form pop up, but it won't take focus (whereas if you visit it using Firefox, IE8, or any other modern browser and click the "Add Record" button, the "Date" input will take focus). Could anyone tell me why this is happening? Here's the code I'm using to give focus to the field:

var buttonExtension  = 6;

var searchboxState   = "none";
var addboxState      = "none";
var controlsEnabled  = false;

window.onload = function () {
	//snip
	controlsEnabled = true;
	shortcut.add("Ctrl+Alt+A", AddShortcut);  //, {'disable_in_input':true});
	shortcut.add("Ctrl+Alt+S", SearchShortcut);
}

//snip

function AddShortcut () {
	ToggleAddbox();
	(addboxState == "block") ? document.getElementById("add_date").focus() : null;
}

//snip

function ToggleAddbox () {
	if (controlsEnabled) {
		if (searchboxState == "block") ToggleSearchbox();
		addboxState   = (addboxState == "none" ? "block" : "none");
		(addboxState == "block") ? ButtonExtend("addbutton") : ButtonRetract("addbutton");
		document.getElementById("addbox").style.display = addboxState;
	}
}

//snip

function ButtonExtend (buttonID) {
	var el = document.getElementById(buttonID);
	if (ie7fix) {  //Boo, dirty javascript fix.
		var tblist = getElementsByClassName("toolbar_button", document.getElementById("toolbar_left"));
		for (var i=0; i<tblist.length; i++) tblist[i].style.top = -buttonExtension + "px";
		el.style.top = "0px";
	}
	el.style.borderBottomColor = "#E3E3E3"
	el.style.paddingBottom = buttonExtension + "px";
}

function ButtonRetract (buttonID) {
	var el = document.getElementById(buttonID);
	if (ie7fix) {  //Boo, dirty javascript fix.
		var tblist = getElementsByClassName("toolbar_button", document.getElementById("toolbar_left"));
		for (var i=0; i<tblist.length; i++) tblist[i].style.top = "0px";
	}
	el.style.borderBottomColor = "#959595"
	el.style.paddingBottom = "0px";
}
  • 2 Contributors
  • 7 Replies
  • 224 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Airshow

Recommended Answers

All 7 Replies

Member Avatar for Airshow

treyk4,

This looks like a real-time issue, ie. the code may be trying to set focus before the toggle action has been wholly completed, though theoretically it should be OK.

Try introducing some delay by setting a timeout, thus:

(addboxState == "block") ? setTimeout('document.getElementById("add_date").focus()', 200) : null;

and similarly in the ToggleAddbox() function.

200 is the delay in milliseconds. If it works, then reduce to see what you can get away with but remember that other users' computers will be different. Typically for this type of issue, I use a minimum of 50ms or 5 times the minimum that works on my development machine, whichever is larger.

But, this may not be the issue at all. Will be interseted to hear how things go.

Airshow

Member Avatar for treyk4

treyk4,

This looks like a real-time issue, ie. the code may be trying to set focus before the toggle action has been wholly completed, though theoretically it should be OK.

Try introducing some delay by setting a timeout, thus:

(addboxState == "block") ? setTimeout('document.getElementById("add_date").focus()', 200) : null;

and similarly in the ToggleAddbox() function.
...

Thank you for your reply, but I'm afraid that's not the problem. If you'll look at the page, I've added the setTimeout, and IE6/7 still don't like it. I've even doubled the timeout time to a ridiculous 400ms, and they're still not taking it, so I would assume that that isn't the problem.

Are there any other possible issues that pop out?

Thanks,
Trey

Member Avatar for Airshow

Mmmm, pity I thought timeout might work.

I have just tried a simple test page in IE6 and it works fine. Give it a try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TESTING Focus()</title>
<style type="text/css">
#testField { display:none; }
</style>
<script language="javascript" type="text/javascript">
onload = function(){
	var fld = document.getElementById('testField');
	fld.style.display = 'block';
	fld.focus();
}
</script>
</head>
<body>
<h2>Testing focus()</h2>
<p>Cursor should automatically appear in the input field below.</p>
<input id="testField">
</body>
</html>

Airshow

Member Avatar for treyk4

Ah, I've found out the problem. I've been using Multiple IE's to view the page in IE6 and IE7, and it appears as if this is what as been causing the problem. I tested out the page in IE7 natively on my vista partition, and it appears to be working just fine.

Thanks for the help

Member Avatar for Airshow

Trey,

... Multiple IE's ...

Could you explain please? I need to know what to avoid.

Airshow

Member Avatar for treyk4

Trey,

Could you explain please? I need to know what to avoid.

Airshow

The problem seems to be revealed here: http://www.sitepoint.com/forums/showthread.php?t=580954

MultipleIE and the Evolt IE "browsers" use the JavaScript engine of the actual installation rather than their own native ones...

Multiple IE is only useful for testing the way the page looks. You need a complete copy of each version of IE to be able to test your JScript...

HTH,
Trey

PS - I would also recommend using the alternative to Multiple IE's mentioned in the article. It's got a slick interface and from first impressions (even though it's still in alpha) it seems to be a very useful tool: http://www.my-debugbar.com/wiki/IETester/HomePage
It's still quite buggy and I wouldn't recommend it to be a replacement to Multiple IE's (right now, at least. There are some major flaws ex. IE7 is rendered as IE6, I can't get IE5.5 to work at all), but it does seem like it would come in handy.

Member Avatar for Airshow

Trey,

Thanks for that. I was unaware.

Seems like "quirks mode" testing might be a thing of the past then.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.