jquery löschen Eingabe Standardwert

Wie kann ich den Standardwert eines Eingabeformulars onfocus mit jquery löschen und es erneut löschen, wenn die Übergabeschaltfläche gedrückt wird?jquery löschen Eingabe Standardwert

<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>

Quelle

2012-08-01 viktor

Können Sie stattdessen das native Attribut 'Platzhalter' verwenden? Es gibt verschiedene [Polyfills] (https://github.com/jamesallardice/Placeholders.js), die in älteren Browsern funktionieren. –

@JamesAllardice Warum hast du es nicht als Antwort gepostet? Ich denke, das ist die einfachste und beste Lösung. – jelies

@jelies - Ich habe es nicht als Antwort gepostet, weil es zwar genau das tut, was der OP versucht, aber nicht wirklich beantwortet, was mit seinem Code nicht stimmt. Aber ich stimme zu, es ist definitiv die einfachste Lösung! –

Sie können diese 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>

Reden von Ihrem eigenen Code, das Problem ist, dass die attr api von jquery von

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

gesetzt ist und nicht, wie Sie getan haben:

$('.input').attr('value') = 'Email address';

Quelle

2012-08-01 09:57:25 Kaustubh

Ich habe mich entschieden, diese Antwort zu verwenden, da sie am elegantesten erscheint. – viktor

thnx.i bin ich neu zu jquery.dies ist meine erste akzeptierte Anser hier und dritte insgesamt (wie Sie wahrscheinlich durch meine Reputation Punkte ableiten können) – Kaustubh

Warum '$ ('. Input'). RemoveAttr ('Wert')' funktioniert nicht? –

bereit:

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); 
    });

Quelle

2012-08-01 08:10:24 tekilatexee

$('.input').on('focus', function(){ 
    $(this).val(''); 
}); 

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

Quelle

2012-08-01 08:11:02 Faust

Wenn Sie wirklich besorgt über älteren Browser, der Sie gerade die neuen html5 Platzhalter Attribut wie so verwenden könntest:

<input type="text" name="email" placeholder="Email address" class="input" />

Quelle

2012-08-01 08:12:07

"Wenn Sie sich nicht wirklich Sorgen um ältere Browser machen" ... können Sie das 'Platzhalter'-Attribut füllen, so dass es auch in älteren Browsern funktioniert. Sehen Sie meinen Kommentar zu der Frage, und sehen Sie sich das [Modernizr Wiki] (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) für andere Beispiele an. –

Ja, das stimmt, oder Sie könnten einfach ein bisschen JQuery schreiben, um das Attribut selbst zu ziehen, wenn Sie daran interessiert sind. –

$(document).ready(function() { 
    //... 
//clear on focus 
$('.input').focus(function() { 
    $('.input').val(""); 
}); 
    //clear when submitted 
$('.button').click(function() { 
    $('.input').val(""); 
});

});

Quelle

2012-08-01 08:12:35

Das ist falsch '$ ('. Input'). Attr ('wert') = 'Email address';', sollte '$ ('. Input') sein. Attr ('value', 'Email address'); Wie wird diese Antwort aufgewertet? –

@ToniMichelCaubet Bearbeitete die Antwort, danke. Dieser Code war sowieso nicht mit der Frage verbunden. Ich kopiere es aus dem Code des Topicstarter. –

nur eine Abkürzung

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

Quelle

2015-08-21 19:11:46

jquery löschen Eingabe Standardwert

Antwort

Verwandte Themen