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