Hi Michael,
That looks like it would do what you're shooting for.
I played around with it a bit just for kicks, seeing if I could
condense things, and came up with this:
$('#userid_field,#password_field').focus(function() {
$(this).attr({ class: 'login_fields'}).val('');
if ($(this).is('#password_field')) {
$(this).attr('type', 'password');
};
}).blur(function() {
if ( !$.trim($(this).val()) && $(this).is('#userid_field') ) {
$(this).attr('class', 'login_labels').val('userid');
} else if ( !$.trim($(this).val()) && $(this).is
('#password_field') ) {
$(this).attr({ class: 'login_labels', type: 'text'}).val
('password');
};
});
I personally still prefer the approach that uses labels (and actually
wrote up my own little script doing the same thing for the book) for
the accessibility and graceful degradation, but I guess I could see a
place for both.
One other thing that you might want to consider is that your script
empties the inputs even after a user has typed in something and then
returns to it. This might prove frustrating to someone who types in a
long user name, sees a typo, and returns to the field to fix it, only
to find that the user name is wiped out and he or she has to start
all over again. On focus, you might want to check for this.value ==
this.defaultValue or something of the sort.
I'm hoping you'll take this all as constructive feedback. :)
Cheers,
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 1, 2007, at 5:39 PM, Michael E. Carluen wrote:
Hi Scott, Karl:
Below, is a revised version of the script I sent earlier that
addresses the blur event.
I frequently require Javascript enabled as a minimum, that is why I
often regret to remember about graceful degradation. In any case
Scott, your plugin definitely is more flexible, I agree. - Michael
<style>
.login_labels{color: #708090;}
.login_fields{color: #000;}
</style>
<script>
$('#userid_field').focus(function() {
$(this).attr({ class: 'login_fields'}).val('');
});
$('#userid_field').blur(function() {
var userval = $(this).val();
var userval = $.trim(userval);
if (userval == '') {
$(this).attr({ class: 'login_labels'}).val('userid');}
});
$('#password_field').focus(function() {
$(this).attr({ class: 'login_fields', type: 'password'}).val
('');
});
$('#password_field').blur(function() {
var userval = $(this).val();
var userval = $.trim(userval);
if (userval == '') {
$(this).attr({ class: 'login_labels', type: 'text'}).val
('password');
}
});
</script>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On
> Behalf Of Scott Sauyet
> Sent: Sunday, April 01, 2007 11:54 AM
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: My first plugin, overlabel
>
>
> Michael E. Carluen wrote:
> > I am curious as to what might be the advantage of using your
overlabel
> > plugin versus a much shorter script like the one below?
>
> I posted your suggested code at
>
> http://scott.sauyet.com/Javascript/Demo/Overlabel/test.html
>
> and a simple version of mine at
>
> http://scott.sauyet.com/Javascript/Demo/Overlabel/simple.html
>
> I think you misunderstood the point of the script. Yours clears the
> input boxes on focus. I guess there might be times when that is
useful,
> but that wasn't the point of mine.
>
> Mine was meant to reduce the space taken by a label together with an
> input box. It puts the labels on top of the input boxes so that you
> know what has to be entered in them. On focus that text was
cleared,
> but it returned on blur unless you've entered text in the box, in
which
> case, your text displays. If you look at the simple version above
> without Javascript and with Javascript, you should see how the space
> taken by the form is reduced.
>
> Karl Swedberg suggested that this had to do with accessibility and
> graceful degradation. That is certainly correct, but the main
point is
> simply to reduce the screen real estate taken by the form.
>
> -- Scott
