Safari Question

[aforstie]

Please see the javascript below. In Safari if I tab into the field that calls this function the browser shuts down. If I click in the field everything works but the focus is not set. Any ideas how I may fix this? Or as a worst case at lease put in a fix to prevent the (Safari) browser from closing?

function addPasswordElement() {
inputElement = document.createElement("input");
inputElement.setAttribute("name","password");
inputElement.setAttribute("id","password");
inputElement.setAttribute("value","");
inputElement.setAttribute("type","password");
inputElement.setAttribute("size","10");
document.getElementById("password-span").appendChild(inputElement);
// need to use className and maxLength instead of setAttribute to work in IE
document.getElementById("password").className = "regtextbox";
document.getElementById("password").maxLength = "20";
// needs to be called twice to work in IE
document.getElementById("password").focus();
document.getElementById("password").focus();
}

 

[BabyJeffy]

Here's a suggestion... change your code to this...

function addPasswordElement() {
   inputElement = document.createElement("input");
   inputElement.setAttribute("name","password");
   inputElement.setAttribute("id","password");
   inputElement.setAttribute("value","");
   inputElement.setAttribute("type","password");
   inputElement.setAttribute("size","10");
   [s]document.getElementById("password-span").appendChild(inputElement);[/s]
   // need to use className  and maxLength instead of setAttribute to work in IE 
   [COLOR=red]inputElement.className = "regtextbox";[/color]
   [COLOR=red]inputElement.maxLength = "20";[/color]
   // needs to be called twice to work in IE
   [COLOR=red]inputElement.focus();[/color]
   [COLOR=red]inputElement.focus();[/color]
}

I'm not sure this is a solution to your problem... but it could be a timing issue given you have just created the element - and Safari might not be behaving nicely.

Anyway... it's just as valid, but it also removes a call to getElementById().

Hope this helps
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[vladibo]

But BabyJeffy, with your code you don't place the newly created INPUT into a "password-span"?!

 

[BabyJeffy]

Haha... that was over use of the cool TGML markup I was playing with. Ignore the strikethru... it's not supposed to be there

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[aforstie]

Thanks for the tip! This still works in all cases - but it still shuts down the Safari browser

 

[BabyJeffy]

If you put up a URL which shows this happening, I'll get a chance to look into it with Safari this evening.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[aforstie]

I do not have a URL in production that you can look at yet.

I have changed the code a little to address some other issues and it now reads:

function textElement() {

var inputElement = document.createElement("input");
inputElement.setAttribute("name","password");
inputElement.setAttribute("id","password");
inputElement.setAttribute("value",SignInLang.PASSWORD);
inputElement.setAttribute("type","text");
inputElement.setAttribute("size","10");
inputElement.className = "regtextbox";
inputElement.maxLength = "20";

if (window.attachEvent) {
inputElement.attachEvent("onfocus",passwordElement);
}
else if (window.addEventListener) {
inputElement.addEventListener("focus",passwordElement,true);
}

var parentElement = document.getElementById("password-span");
var childElement = document.getElementById("password");
parentElement.replaceChild(inputElement, childElement);

return false;

}

function passwordElement() {

var inputElement = document.createElement("input");
inputElement.setAttribute("name","password");
inputElement.setAttribute("id","password");
inputElement.setAttribute("value","");
inputElement.setAttribute("type","password");
inputElement.setAttribute("size","10");
inputElement.className = "regtextbox";
inputElement.maxLength = "20";

var parentElement = document.getElementById("password-span");
var childElement = document.getElementById("password");
parentElement.replaceChild(inputElement,childElement);

// call twice to set focus in IE
document.getElementById("password").focus();
document.getElementById("password").focus();

return false;

}

I am still getting the same results in Safari. I turned on Debug and I get the following:

Anonymous function hack: eating identifier XMLHttpRequest
(event handler):Value undefined (result of expression method.apply) is not object. Cannot be called.

 

[BabyJeffy]

Are you using some kind of Javascript framework? Maybe jQuery?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[aforstie]

I am not using any kind of Javascript framework.