jquery clear Eingabestandardwert

77

Wie kann ich den Standardwert eines Eingabeformulars onfocus mit jquery löschen und erneut löschen, wenn die Senden-Taste gedrückt wird?

<html>
        <form method="" action="">
            <input type="text" name="email" value="Email address" class="input" />
            <input type="submit" value="Sign Up" class="button" />
        </form>
</html>

<script>
$(document).ready(function() {
    //hide input text
    $(".input").click(function(){
        if ($('.input').attr('value') == ''){
            $('.input').attr('value') = 'Email address'; alert('1');}
        if  ($('.input').attr('value') == 'Email address'){
            $('.input').attr('value') = ''}
    });
});
</script>
jquery viktor
quelle
9
Könnten Sie placeholderstattdessen das native Attribut verwenden? Es stehen verschiedene Polyfills zur Verfügung, damit es in älteren Browsern funktioniert.
James Allardice
@ JamesAllardice Warum hast du es nicht als Antwort gepostet? Ich denke, das ist die einfachste und beste Lösung.
Gelees
1
@jelies - Ich habe es nicht als Antwort gepostet, da es zwar das Gleiche tut wie das OP, aber nicht wirklich antwortet, was mit dem Code nicht stimmt. Aber ich stimme zu, es ist definitiv die einfachste Lösung!
James Allardice
Ja, es ist eine gute Antwort und ich habe sie positiv bewertet, aber ich möchte das Platzhalter-Tag nicht verwenden.
Viktor

Antworten:

126

Sie können dies verwenden ..

<body>
    <form method="" action="">
        <input type="text" name="email" class="input" />
        <input type="submit" value="Sign Up" class="button" />
    </form>
</body>

<script>
    $(document).ready(function() {
        $(".input").val("Email Address");
        $(".input").on("focus", function() {
            $(".input").val("");
        });
        $(".button").on("click", function(event) {
            $(".input").val("");
        });
    });
</script>

Wenn Sie von Ihrem eigenen Code sprechen, besteht das Problem darin, dass die attr-API von jquery von festgelegt wird

$('.input').attr('value','Email Adress');

und nicht wie du es getan hast:

$('.input').attr('value') = 'Email address';
Kaustubh
quelle
Ich habe beschlossen, diese Antwort zu verwenden, da sie am elegantesten erscheint.
viktor
1
Ich bin neu bei jquery. Dies ist meine erste akzeptierte Antwort hier und die dritte insgesamt (wie Sie wahrscheinlich anhand meiner Reputationspunkte ableiten können)
Kaustubh
Warum $('.input').removeAttr('value')funktioniert das nicht?
Almino Melo
16 
$(document).ready(function() {
  //...
//clear on focus
$('.input').focus(function() {
    $('.input').val("");
});
   //clear when submitted
$('.button').click(function() {
    $('.input').val("");
});

});

Sasha
quelle
Das ist falsch $('.input').attr('value') = 'Email address';, sollte sein, $('.input').attr('value', 'Email address');wie wird diese Antwort positiv bewertet?
Toni Michel Caubet
1
@ToniMichelCaubet Die Antwort bearbeitet, danke. Dieser Code hatte sowieso nichts mit der Frage zu tun. Ich habe es aus dem Code von topicstarter kopiert.
Sasha
8

Wenn Sie sich nicht wirklich Sorgen um ältere Browser machen, können Sie das neue HTML5- placeholderAttribut wie folgt verwenden :

<input type="text" name="email" placeholder="Email address" class="input" />
DJ Forth
quelle
2
"Es sei denn, Sie machen sich wirklich Sorgen um ältere Browser" ... Sie können das placeholderAttribut mehrfach ausfüllen , damit es auch in älteren Browsern funktioniert. Siehe meinen Kommentar zu der Frage und andere Beispiele im Modernizr-Wiki .
James Allardice
Ja, das stimmt, oder Sie könnten einfach ein bisschen JQuery schreiben, um das Attribut selbst zu ziehen, wenn Sie daran interessiert sind.
DJ Forth
7 
$('.input').on('focus', function(){
    $(this).val('');
});

$('[type="submit"]').on('click', function(){
    $('.input').val('');
});
Faust
quelle
3

Versuch das:

  var defaultEmailNews = "Email address";
  $('input[name=email]').focus(function() {
    if($(this).val() == defaultEmailNews) $(this).val("");
  });

  $('input[name=email]').focusout(function() {
    if($(this).val() == "") $(this).val(defaultEmailNews);
  });
Tekilatexee
quelle
2

Nur eine Abkürzung

$(document).ready(function() {
    $(".input").val("Email Address");
        $(".input").on("focus click", function(){
            $(this).val("");
        });
    });
</script>
Toni Michel Caubet
quelle