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:[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
