jQuery fill empty text input with default value

Question

I have the following code to fill the suchfeld <input> with "Suche...".

$(function() {
    var suchfeld = $("#suchfeld");


    suchfeld.on("focus", function() {
        if( suchfeld.val() == "Suche..." ) {
            suchfeld.val("");
        }
    });

    suchfeld.on("blur", function() {
        if( suchfeld.val() == 0 ) {
            suchfeld.val("Suche...");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="suchfeld" type="text"/>

The problem is that after the user has the site loaded with the suchfeld <input> and the site is in the cache of browser, if the user comes back to the loaded site the <input> is empty without "Suche...".

What can I do?

tried placeholder attribute?

RomanPerekhrest
– RomanPerekhrest

2016-06-29 13:08:40 +00:00
Commented Jun 29, 2016 at 13:08 — RomanPerekhrest
– RomanPerekhrest, Commented Jun 29, 2016 at 13:08
Nice man! That works for :-)

Jürgen Hohlkopf
– Jürgen Hohlkopf

2016-06-29 13:19:10 +00:00
Commented Jun 29, 2016 at 13:19 — Jürgen Hohlkopf
– Jürgen Hohlkopf, Commented Jun 29, 2016 at 13:19
Does this help? stackoverflow.com/questions/2699284/…

Theodore K.
– Theodore K.

2016-06-29 13:19:11 +00:00
Commented Jun 29, 2016 at 13:19 — Theodore K.
– Theodore K., Commented Jun 29, 2016 at 13:19

Jaqen H'ghar · Accepted Answer · 2016-07-05 22:11:49Z

1

Instead of Javascript use placeholder:

<input type="text" placeholder="Suche...">

Side note:

To hide the placeholder on focus (like in your example) use:

<input type="text" placeholder="Suche..." onfocus="this.placeholder = ''" 
     onblur="this.placeholder = 'Suche...'" >

edited Jul 5, 2016 at 22:11

answered Jun 29, 2016 at 13:17

Jaqen H'ghar

17k8 gold badges52 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roxoradev · Accepted Answer · 2016-06-29 13:09:51Z

0

try setting on the page load the field to "Suche..."

$(function() {
    var suchfeld = $("#suchfeld");
    suchfeld.val("Suche...");

    suchfeld.on("focus", function() {
        if( suchfeld.val() == "Suche..." ) {
            suchfeld.val("");
        }
    });

    suchfeld.on("blur", function() {
        if( suchfeld.val() == 0 ) {
            suchfeld.val("Suche...");
        }
    });
});

answered Jun 29, 2016 at 13:09

Roxoradev

9034 silver badges13 bronze badges

2 Comments

Jürgen Hohlkopf Over a year ago

The problem is that there is no reload when the user comes back to the page. This example doesn't solve it!

Roxoradev Over a year ago

Why don't you try using a placeholder instead?

Collectives™ on Stack Overflow

jQuery fill empty text input with default value

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related