jQuery Text löschen onfocus

Question

Ich habe versucht, einen Standardwert in einer Texteingabe haben, dann mit jQuery, wenn Sie "onfocus" das Textfeld, macht es den Text schwarz (Standard ein helles Grau), und löscht den Standardwert. Ich denke, Sie wissen, wovon ich spreche, also wissen Sie, wie man dies erreichen kann?

Answer 1

Auf diese Weise können Sie auch das Google Watermark Plugin verwenden:

Laden Sie das neueste jQuery-Skript herunter:

http://jquery.com/download/

Laden Sie das Watermark-Plugin herunter:

https://code.google.com/p/jquery-watermark/

\========== Kopf ==========

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.watermark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(function () {
        $("#input-name").watermark("Your name");
        $("#input-email").watermark("Your e-mail address");
    });
});
</script>

\========== Körper ==========

<div id="wrap-contact">
<form id="form-contact" name="form-contact" method="post" action="">
<div id="layer-email">
<input type="text" name="input-email" id="input-email" />
</div>
<div id="layer-name">
<input type="text" name="input-name" id="input-name" />
</div>
</form>
</div>

\========== CSS ==========

/*
========================
form styles
========================
*/
#wrap-contact {
    margin: auto;
    width: 760px;
}
#layer-email {
    float:left;
    width:340px;
    padding:2px;
    background:#ccc url(images/user.png) no-repeat 98% 50%;
}
#layer-name {
    float:right;
    width:340px;
    padding:2px;
    background:#ccc url(images/email.png) no-repeat 98% 50%;
}
#input-email {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;

}
#input-name {
    width: 260px;
    font: 18px Arial, Helvetica, sans-serif;
    border:1px solid #fff;
    padding: 4px;
}

/*
========================
watermark styles
========================
*/
.watermark {color: #999 !important;}