jQuery: The Write Less, Do More JavaScript Library

put the value back in the input (Beginner)

View: New views
6 Messages — Rating Filter:   Alert me  

put the value back in the input (Beginner)

by tlob :: Rate this Message:

| View Threaded | Show Only this Message


Hello

I managed to do sucessfully:

$(document).ready(function(){
        $("#schnellsuche input").focus(function () {
                        $(this).val("");
        });
});


<form action="" id="schnellsuche">
<input class="text" type="text" value="Schnellsuche" />
</form>

I'm so proud of me ;-)

now I want the default value back in, when the focus is not anymore in
the input textbox. Can someone put me in the right direction?

thx

Re: put the value back in the input (Beginner)

by Michael Price-10 :: Rate this Message:

| View Threaded | Show Only this Message


tlob wrote:
> $(document).ready(function(){
> $("#schnellsuche input").focus(function () {
> $(this).val("");
> });
> });

> now I want the default value back in, when the focus is not anymore in
> the input textbox. Can someone put me in the right direction?

 From memory (so it might need tweaking....) you need to chain another
event to your code up there:

$(document).ready(function(){
        $("#schnellsuche input").focus(function () {
  $(this).val("");
  }).blur(function() {
                if ($(this).val() == "") {
                        $(this).val($(this)[0].defaultValue);
                }
        });
});

This adds a blur event that says if the value is empty, restore it to
the element's default value.

Hope this helps. :)

Regards,
Michael Price


Re: put the value back in the input (Beginner)

by tlob :: Rate this Message:

| View Threaded | Show Only this Message


works like a charm!

but I dont get it...
-blur is the opposite of focus, right?
-why do you chain it after the focus?
-with [0].defaultValue you restore the first value that was stored in
an array?
-does JS store every changed value of every element in an array?

thx a lot!

On Feb 15, 3:32 pm, Michael Price <m...@...> wrote:

> tlob wrote:
> > $(document).ready(function(){
> >    $("#schnellsuche input").focus(function () {
> >                    $(this).val("");
> >    });
> > });
> > now I want the default value back in, when the focus is not anymore in
> > the input textbox. Can someone put me in the right direction?
>
>  From memory (so it might need tweaking....) you need to chain another
> event to your code up there:
>
> $(document).ready(function(){
>         $("#schnellsuche input").focus(function () {
>                         $(this).val("");
>         }).blur(function() {
>                 if ($(this).val() == "") {
>                         $(this).val($(this)[0].defaultValue);
>                 }
>         });
>
> });
>
> This adds a blur event that says if the value is empty, restore it to
> the element's default value.
>
> Hope this helps. :)
>
> Regards,
> Michael Price

Re: put the value back in the input (Beginner)

by Michael Price-10 :: Rate this Message:

| View Threaded | Show Only this Message


tlob wrote:
> works like a charm!

Excellent :)

> but I dont get it...
> -blur is the opposite of focus, right?

Yep - focus is triggered when the user tabs or clicks into the input -
blur is triggered when they tab or click out of it so it's no longer the
active element.

> -why do you chain it after the focus?

'tis the jQuery way! What we're basically doing is saying "with the
input in #schnellsuche, add a focus handler, then add a blur handler".

> -with [0].defaultValue you restore the first value that was stored in
> an array?

Not quite. If you imagine $(this) as an array of DOM objects within
jQuery, then $(this)[0] is a way to access the first (or in this case,
only) DOM object. jQuery doesn't have a built in way to retrieve the
default value of an input, so we have to nip back into the DOM
momentarily in order to retrieve it.

> -does JS store every changed value of every element in an array?

The DOM contains a defaultValue attribute for every text input, textarea
and select box. Not sure about checkboxes and radio buttons.

I invite other people to clear up any parts of my reply which aren't
totally accurate (you can tell I have faith in my ability to explain
things properly, I must say this in every post!)

Regards,
Michael Price


Re: put the value back in the input (Beginner)

by Jamie-50 :: Rate this Message:

| View Threaded | Show Only this Message


Hey,

I extended your example code to add a blur function.  You can add an
if statement in the blur function if you need to restore the default
only in certain cases (like only if $(this).val() == "")

$(document).ready(function(){
        $("#schnellsuche input")
             .focus(function () {
                    $(this).val("");
             })
             .blur(function() {
                    $(this).val("Schnellsuche");
             });


});

- Jamie Goodfellow



On Feb 15, 9:28 am, tlob <tlohb...@...> wrote:

> Hello
>
> I managed to do sucessfully:
>
> $(document).ready(function(){
>         $("#schnellsuche input").focus(function () {
>                         $(this).val("");
>         });
>
> });
>
> <form action="" id="schnellsuche">
> <input class="text" type="text" value="Schnellsuche" />
> </form>
>
> I'm so proud of me ;-)
>
> now I want the default value back in, when the focus is not anymore in
> the input textbox. Can someone put me in the right direction?
>
> thx

Re: put the value back in the input (Beginner)

by Cheng Chi(Cloudream) :: Rate this Message:

| View Threaded | Show Only this Message


$('#ANinputID').attr('defaultValue') works in my IE :)

On Feb 15, 11:09 pm, Michael Price <m...@...> wrote:

> tlob wrote:
> > works like a charm!
>
> Excellent :)
>
> > but I dont get it...
> > -blur is the opposite of focus, right?
>
> Yep - focus is triggered when the user tabs or clicks into the input -
> blur is triggered when they tab or click out of it so it's no longer the
> active element.
>
> > -why do you chain it after the focus?
>
> 'tis the jQuery way! What we're basically doing is saying "with the
> input in #schnellsuche, add a focus handler, then add a blur handler".
>
> > -with [0].defaultValue you restore the first value that was stored in
> > an array?
>
> Not quite. If you imagine $(this) as an array of DOM objects within
> jQuery, then $(this)[0] is a way to access the first (or in this case,
> only) DOM object. jQuery doesn't have a built in way to retrieve the
> default value of an input, so we have to nip back into the DOM
> momentarily in order to retrieve it.
>
> > -does JS store every changed value of every element in an array?
>
> The DOM contains a defaultValue attribute for every text input, textarea
> and select box. Not sure about checkboxes and radio buttons.
>
> I invite other people to clear up any parts of my reply which aren't
> totally accurate (you can tell I have faith in my ability to explain
> things properly, I must say this in every post!)
>
> Regards,
> Michael Price