One thing that might muck up your beautifully designed AJAX popups is the user repeatedly hitting the tab key, simple way of stopping this is by inserting a onkeydown event for the keypress..

Trapping TAB

Simple and effective, as soon as the user's cursor gains focus for the username textbox if they then try to hit TAB within it it won't do anything; effectively trapping the action dead.

Obviously if you've got two boxes (username + password), you'll want to put this kind of trap on the password textfield otherwise the user won't be able to tab to the next cell, but as a quick fix it works well.

Setting Focus

You can also set focus via...

$('username').focus();

Quick Note. Unlike Firefox, Internet Explorer handles password fields a little differently, blanking out whatever value you pass it within a 'value' tag.

So...

Will have a password box in Firefox starred out, but in IE it'll appear blank.

To get around this you can use Prototype to inject a value into the password field, so the user see's it as starred out.

$('mypass').value='**';

Note, if you're generating the form dynamically with...

var innerhtml='

Only fire your $('mypass') code after the form has been written to the page otherwise you won't be able to get a handle on it (most cases you won't ever have this problem).

Note to self: safari doesn't seem to like escaped characters being injected into an object within the DOM, seems to break them up.

So,

myObj.innerHTML = '<a onclick=\"do();\">execute</a>';

Comes out as...

<a onclick="; do(); ";>execute</a>

Doesn't happen in Firefox 2, IE6/7 or Safari 3 but fails in Safari 2.0.4

Here's a nice little addon to the Prototype Ajax library that adds the ability to trim text, etc. with Prototype.

First add this to one of your .js include files,

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
    return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
    return this.replace(/\s+$/,"");
}

now with protoype loaded you can trim your text simply and effectivly,

$('myfield').value.trim() == '';

this will simply get the value from the textbox 'myfield', trim it for whitespace and then compare it to see if it's empty.

Sweet!

Thanks goes to SOMACON.COM for this one.

It's hard to do but these might help,

• X-Ray, a bookmarklet to examine elements within the document model, similar to firebug's 'inspect'.

• Fiddler, an http debugger for ie 6/7

• IE Developer Toolbar, similar in power to firebug but in no way as comprehensive.

• IETester, full-blown IE6 standalone browser, finally you can test against IE6 on Vista!