Standardwert eines Eingabetextes beim Klicken löschen

EDIT: Obwohl diese Lösung funktioniert, würde ich empfehlen, dass Sie MvanGeests Lösung unten ausprobieren die das placeholder- Attribut und einen Javascript-Fallback für Browser verwendet, die dies noch nicht unterstützen.

Wenn Sie in der Antwort von MvanGeest nach einem Mootools-Äquivalent zum JQuery-Fallback suchen, ist hier eins .

-

Sie sollten wahrscheinlich onfocus- und onblur -Ereignisse verwenden, um Tastaturbenutzer zu unterstützen, die durch Formulare blättern.

Hier ist ein Beispiel:

<input type="text" value="[email protected]" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = '[email protected]';}"
 onfocus="if (this.value == '[email protected]') {this.value = '';}" />

Das ist etwas sauberer, denke ich. Beachten Sie die Verwendung der Eigenschaft "defaultValue" der Eingabe:

<script>
function onBlur(el) {
    if (el.value == '') {
        el.value = el.defaultValue;
    }
}
function onFocus(el) {
    if (el.value == el.defaultValue) {
        el.value = '';
    }
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

Mit jQuery können Sie Folgendes tun:

$("input:text").each(function ()
{
    // store default value
    var v = this.value;

    $(this).blur(function ()
    {
        // if input is empty, reset value to default 
        if (this.value.length == 0) this.value = v;
    }).focus(function ()
    {
        // when input is focused, clear its contents
        this.value = "";
    }); 
});

Und Sie könnten das alles in ein benutzerdefiniertes Plug-In packen, wie so:

jQuery.fn.hideObtrusiveText = function ()
{
    return this.each(function ()
    {
        var v = this.value;

        $(this).blur(function ()
        {
            if (this.value.length == 0) this.value = v;
        }).focus(function ()
        {
            this.value = "";
        }); 
    });
};

So verwenden Sie das Plug-In:

$("input:text").hideObtrusiveText();

Vorteile bei der Verwendung dieses Codes sind:

• Es ist unauffällig und verschmutzt das DOM nicht
• Wiederverwendung von Code: Es funktioniert in mehreren Feldern
• Es ermittelt den Standardwert der Eingaben selbst

Nicht-jQuery-Ansatz:

function hideObtrusiveText(id)
{
    var e = document.getElementById(id);

    var v = e.value;

    e.onfocus = function ()
    {
        e.value = "";
    };

    e.onblur = function ()
    {
        if (e.value.length == 0) e.value = v;
    };
}

Geben Sie im -Tag den folgenden Ein. Fügen Sie einfach onFocus = "value = ''" hinzu, damit der endgültige Code folgendermaßen aussieht: 

<input type="email" id="Email" onFocus="value=''"> 

Hierfür wird das Javascript onFocus () - Ereignishalter verwendet.

Verwenden Sie einfach ein placeholder-Tag in Ihrer Eingabe anstelle von value.

<input name="Email" type="text" id="Email" placeholder="enter your question" />

Das Platzhalterattribut gibt einen kurzen Hinweis an, der den erwarteten Wert eines Eingabefelds beschreibt (z. B. einen Beispielwert oder eine kurze Beschreibung des erwarteten Formats).

Der kurze Hinweis wird im Eingabefeld angezeigt, bevor der Benutzer einen Wert eingibt.

Hinweis: Das Platzhalterattribut funktioniert mit den folgenden Eingabetypen: Text, Suche, URL, Tel, E-Mail und Kennwort.

Ich denke das wird helfen.

wir können dies ohne js mit dem Attribut "Platzhalter" von html5 .__ tun. (Der Standardtext verschwindet, wenn der Benutzer anfängt zu tippen, aber nicht beim Klicken.)

<input type="email" id="email" placeholder="[email protected]">

siehe hierzu: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

Hier ist ein einfacher Weg.

#animal steht für beliebige Schaltflächen aus dem DOM.
#animal-value ist die Eingabe-ID, auf die abgezielt wird.

$("#animal").on('click', function(){
    var userVal = $("#animal-value").val(); // storing that value
    console.log(userVal); // logging the stored value to the console
    $("#animal-value").val('') // reseting it to empty
});

Hier ist eine jQuery-Lösung. Ich lasse den Standardwert immer wieder angezeigt werden, wenn ein Benutzer das Eingabefeld löscht.

<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="[email protected]" />

<script>
$("#Email").blur(
    function (){
        if ($(this).val() == "")
            $(this).val($(this).prop("defaultValue"));
        }
).focus(
    function (){
        if ($(this).val() == $(this).prop("defaultValue"))
            $(this).val("");
    }
);
</script>

Ich habe keine wirklich einfachen Antworten wie diese gesehen.

var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }

Hier ist sehr einfaches Javascript. Es funktioniert gut für mich:

function sFocus (field) {
    if(field.value == 'Enter your search') {
        field.value = '';
    }
    field.className = "darkinput";
}

function sBlur (field) {
    if (field.value == '') {
        field.value = 'Enter your search';
        field.className = "lightinput";
    }
    else {
        field.className = "darkinput";
    }
}

Warum Wert entfernen? Es ist nützlich, aber warum nicht CSS versuchen

input[submit] {
   font-size: 0 !important;
}

Wert ist wichtig für die Überprüfung und Validierung Ihres PHP