wake-up-neo.net

Standardwert eines Eingabetextes beim Klicken löschen

Ich habe einen Eingabetext:

<input name="Email" type="text" id="Email" value="[email protected]" />

Ich möchte einen Standardwert wie "Was ist Ihre Programmierfrage? Seien Sie genau." in StackOverFlow, und wenn der Benutzer darauf klickt, verschwindet der Standardwert.

58
Wassim AZIRAR

Für eine spätere Bezugnahme habe ich , um die HTML5-Methode dafür einzubeziehen.

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

Wenn Sie einen HTML5-Doctype und einen HTML5-kompatiblen Browser haben, wird dies funktionieren. Viele Browser unterstützen dies jedoch derzeit nicht, sodass Internet Explorer-Benutzer Ihren Platzhalter zumindest nicht sehen können. Eine Lösung finden Sie jedoch unter http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ ( archive.org version ). Dadurch sind Sie sehr modern und standardkonform und bieten den meisten Benutzern die Funktionalität.

Der bereitgestellte Link ist auch eine erprobte und ausgereifte Lösung, die sofort funktionieren sollte.

107
MvanGeest

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 = '';}" />
63
mqchen

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

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

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.

3
Myke

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

2
072et

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

1
kkk

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

1
c-h-a-r-a-n

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";}; }
0
Brian M

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";
    }
}
0
ELO

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

0
KingRider