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?

Does this help? http://stackoverflow.com/questions/2699284/make-page-to-tell-browser-not-to-cache-preserve-input-values — Theodore K., Jun 29 '16 at 13:19

Jaqen H'ghar · Answer 1 · 2016-07-05T22:11:49.787

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 05 '16 at 22:11

answered Jun 29 '16 at 13:17

Jaqen H'ghar

13,728
6
42
50

score 0 · Answer 2 · answered Jun 29 '16 at 13:09

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 '16 at 13:09

Roxoradev

853
4
12

The problem is that there is no reload when the user comes back to the page. This example doesn't solve it! – Jürgen Hohlkopf Jun 29 '16 at 13:16
Why don't you try using a placeholder instead? – Roxoradev Jun 29 '16 at 13:18

jQuery fill empty text input with default value

2 Answers2