Wie bekomme ich die Formular-Werte verschwinden, wenn ich das Feld eingeben?

Ich mache eine einfache form mit etwa acht Eingabefelder. Ich möchte den ersten Wert in das Feld, um anzugeben, was die Leute dort geben soll. Zum Beispiel value="name" so, dass die Menschen wissen, geben Sie dort Namen die es gibt.

Meine Frage ist aber wie bekommt man den Anfangswert zu verschwinden, wenn Sie eingeben, das Feld, so dass der erste Wert ist nur ein Hinweis und kein fester Wert, Sie zu löschen, bevor Sie schreiben können, in Ihrem Namen?

Dank!

InformationsquelleAutor fmz | 2009-10-01
  1. 22

    Einstellen der 'default' - Wert auf "Namen". Dann, mithilfe von javascript und dem "onfocus" - Veranstaltung, deaktivieren Sie das Feld.

    So müssten Sie:

    <input type="textbox" value="Name" onfocus="if (this.value=='Name') this.value='';"/>
    • Arbeitet, gerade Recht. Vielen Dank für die schnellen Antworten!
    • Denken Sie daran wählen Sie eine Antwort als "akzeptiert" und klicken auf den grünen Haken unter die Stimmen.
    InformationsquelleAutor Erich
  2. 37

    Einen viel einfacheren Weg, sein könnte:

    placeholder="Name"
    • Ich denke, das problem mit diesem ist, dass es dann entfernen eingegebene text könnte schlecht sein für die Benutzer.
    • Es gibt ziemlich gute Unterstützung für Platzhalter: caniuse.com/#feat=input-placeholder
    InformationsquelleAutor Matt
  3. 6

    Dies ist, wie Sie es tun sollten.

    <input type="text" value="name" onfocus="this.value = this.value=='name'?'':this.value;" onblur="this.value = this.value==''?'name':this.value;">

    Wenn Sie darauf klicken, und klicken Sie auf off-der default-Wert zurück. Wenn Sie darauf klicken, und geben Sie etwas ein, es nicht versuchen zu löschen, was Sie setzen, wenn Sie zurück zu gehen, klicken Sie auf es wieder.

    InformationsquelleAutor Mickey
  4. 3

    Grundlegende javascript:

    <input type="text" value="name" onfocus='if(this.value=="name"){this.value="";}' />
    InformationsquelleAutor Daniel Sorichetti
  5. 1

    Nur für S&G ' s die ich dachte, ich würde post einen wiederverwendbaren jQuery-Lösung für dieses problem.

    var formDefaulter=function(){
    //Class to hold each form element
    var FormElement=function(element){
        var that=this;
        this.element=element;

        var initialVal=this.element.val();
        var isEdited=false;

        this.element.focus(function(){clearBox()});
        this.element.blur(function(){fillBox()});

        var clearBox=function(){
            if(!isEdited){
                that.element.val("");
                isEdited=true;
            }
        }
        var fillBox=function(){
            if(that.element.val()==""){
                that.element.val(initialVal);
                isEdited=false;
            }
        }
    }

    var add=function(elementId){
        new FormElement($('#'+elementId));
    }

    return{
        add:add
    }
}();

    Dann müssen Sie nur noch anfügen, jedes element mit einem ID-Attribut-Wert. Etwa so:

    $(function(){
    formDefaulter.add('contact_name');
    formDefaulter.add('contact_email');
    formDefaulter.add('contact_msg');
});

    Diese auch füllt das Formular-element mit seiner ursprünglichen Wert, wenn Ihr Inhalt gelöscht wird. Trotzdem, hoffentlich ist das hilfreich für jemand.

    InformationsquelleAutor twiz
Schreibe einen Kommentar