0

I would like to know how it is possible to retrieve the default value of an input field after .val() was changed. My markup are different text-inputs with classes .large and .medium and I have a default text value in every field.

What I want to do is, when the user focusin the field the default value disappears. When focusout the field, the default value comes back. Now when the user already typed something in, the field keeps the typed in value even on focusout BUT what I can't get to work is, if the user deletes its typed in text and focusses out the default value should appear again.

My code is:

        var $inputs = $('.large, .medium');
        var allowSaveVal = true;    

        $inputs.on('focusin', this, function() { 
             saveVal = $(this).val();
             if (allowSaveVal) $(this).val('');
        });

        $inputs.on('keydown', this, function() {
            allowSaveVal = false;
            $(this).css('color', '#000000');
        });

        $inputs.on('focusout', this, function() { 
            if($(this).val() == '') $(this).val(saveVal);
            if (allowSaveVal) $(this).val(saveVal);
        });

Hope my question is clear. Thanks!

supersize
  • 13,764
  • 18
  • 74
  • 133

4 Answers4

2

You can use "placeholder" in your html codes instead of js or jquery.

<input type="text" placeholder="yourdefaultvalue" />

If the user enters a value into the input and focusout, the value doesn't disappear.

Kerem Zaman
  • 529
  • 1
  • 5
  • 18
2

You don't have to code this, just make use the placeholder attribute.

Example:

<input type="text" placeholder="default text">

bobthedeveloper
  • 3,733
  • 2
  • 15
  • 31
  • just make sure your audience uses browsers where the `placeholder` attribute is supported, have a look here: [http://stackoverflow.com/questions/4004087/html-placeholder-browser-compatibility](http://stackoverflow.com/questions/4004087/html-placeholder-browser-compatibility) – benomatis Apr 19 '14 at 10:43
  • 2
    ...and nonetheless, this will only work if the user hasn't typed in anything yet into the field, as noted by @KeremZaman in their answer... – benomatis Apr 19 '14 at 10:45
  • @webeno but the answer isn't available anymore. It was a solution with data-attributes, but I can't see it, would be nice to know! edit: ah no, it was someone else! – supersize Apr 19 '14 at 10:47
  • i still see it, it says at the end: 'If the user enters a value into the input and focusout, the value doesn't disappear.' – benomatis Apr 19 '14 at 10:50
  • @webeno yeah sorry my fault, didn't refresh! thanks for the infos! – supersize Apr 19 '14 at 10:52
1

Save the value in a variable in your js code before you'd change anything and you'll be able to call it later.

var largeInit = $('.large').val();
var mediumInit = $('.medium').val();
benomatis
  • 5,536
  • 7
  • 36
  • 59
  • the problem is, since there are a few inputs but only 2 classes I don't know how to select each value and later assign it to the correct one. – supersize Apr 19 '14 at 10:24
  • no, I might explained myself a bit bad but I have more inputs than two! But only 2 classes so I can't save each as one var. – supersize Apr 19 '14 at 10:28
  • why don't you id your inputs? – benomatis Apr 19 '14 at 10:29
  • @the inputs are generated dynamically by a plugin. thought it isn't needed. placeholder does a good job tho! – supersize Apr 19 '14 at 10:33
  • just make sure your audience uses browsers where the `placeholder` attribute is supported, have a look here: [http://stackoverflow.com/questions/4004087/html-placeholder-browser-compatibility](http://stackoverflow.com/questions/4004087/html-placeholder-browser-compatibility) – benomatis Apr 19 '14 at 10:43
0

If i completely understand your question then you can do that with place-holder attribute for that html element

try : 

<input type='text' placeholder='This your default value' />

If this helps dont forget to accept answer.

Amit Kumar
  • 3,384
  • 6
  • 25
  • 42