I'm building a form in which the specified values (the ones written in
the value attribute) for the inputs (types: text or password) are
saved as default values for that fields and when the user clicks on
them they disappear or appear again if the field has been left blank.
So, basically: the specified values are hints to the fields. With the
focus event, the hint disappears and with blur appears again if the
field is empty.
Each input has the following structure:
<div class='txtbox'>
<div class='i1'></div>
<div class='input'><input class=i2' type='{text or password}'
value="Default value for this field" /></div>
<div class='i3'></div>
</div>
The extra divs are there to make an input with round corners through
CSS. I'm also trying to outline the input when it is selected (with
the same focus and blur events, and preserving the round corners).
The problem comes with password inputs because the 'type' attributes
can't be changed in IE. The solution I came with was appending a text
input to each password input with the value specified for the password
input. Then I cleared the value for the password, hid the password
fields and showed the newly created one. This works like charm.
The thing is that, in IE, when I focus the password field, the focus
event is triggered twice. The outline effect appears and disappears.
There is a nasty workaround for this that I prefer not to use.
This is my code:
var TextBoxOutline=function(){
var a=$(this),b=a.parent();
b.prev().toggleClass("i1b");
a.toggleClass("i2b");
b.next().toggleClass("i3b");
}
/* The iXb classes are specified in the stylesheet and make the
outline effect in the input*/
$(".txtbox input.i2[type=text]").bind("focus blur",TextBoxOutline);
$(".txtbox input.i2[type=text]").each(function(){
var t=$(this),b=jQuery.data(t,"defaultValue",t.val());
t.bind("focus blur",function(e){
var x=e.type,q=t.val();
if(x=='focus'&&q==b){t.val("");}
else if(x=='blur'&&$.trim(q)==""){t.val(b);}
})
});
$(".txtbox input.i2[type=password]").bind("focus
blur",TextBoxOutline);
$(".txtbox input.i2[type=password]").each(function(){
var t=$(this),newInput=$("<input type='text' class='i2'
readonly>").val(t.val()).css({cursor:'text'});
t.val('').after(newInput).css({display:'none'});
var fn=function(){newInput.toggle();t.toggle()}
newInput.focus(function(){
fn();
/*if(!ie)t.focus();else{t.select()}*/
/* This is the nasty workaround for IE */
t.focus();
})
t.blur(function(){
if($.trim(t.val())=='')fn()
});
});
Do you have any ideas?
