HTML5-Platzhalter verschwindet bei Fokus

Question

Gibt es ein frei verfügbares jQuery-Plugin, das die placeholder Verhalten an die HTML5-Spezifikation anpassen?

Vor dem Fokus

On Focus Gut (Safari)

Bei Focus Bad (Chrome, Firefox)

Sie können was Ihr Browser macht mit dieser einfachen Fiedel .

HTML5-Entwurf sagt :

Benutzeragenten sollten dem Benutzer diesen Hinweis präsentieren, nachdem sie die Zeilenumbrüche entfernt haben, wenn der Wert des Elements die leere Zeichenkette ist und/oder das Steuerelement nicht fokussiert ist (z. B. indem es innerhalb eines leeren, nicht fokussierten Steuerelements angezeigt und ansonsten ausgeblendet wird).

Das "/or" ist neu im aktuellen Entwurf, deshalb unterstützen Chrome und Firefox es wohl noch nicht. Siehe WebKit-Fehler #73629 , Chromium Fehler #103025 .

Answer 1

Stefano J. Attardi hat ein schönes jQuery-Plugin geschrieben, das genau das tut.
Es ist stabiler als das von Robert und verblasst außerdem zu einem helleren Grau, wenn das Feld fokussiert wird.

• 参照 die Demo-Seite
• Schnappen Sie es sich auf GitHub
• Spielen mit die Fiedel

---

Ich habe sein Plugin so geändert, dass es lautet placeholder Attribut im Gegensatz zur manuellen Erstellung eines span .
Diese Fiedel hat vollständigen Code:

HTML

<input type="text" placeholder="Hello, world!">

JS

// Original code by Stefano J. Attardi, MIT license

(function($) {
    function toggleLabel() {
        var input = $(this);

        if (!input.parent().hasClass('placeholder')) {
            var label = $('<label>').addClass('placeholder');
            input.wrap(label);

            var span = $('<span>');
            span.text(input.attr('placeholder'))
            input.removeAttr('placeholder');
            span.insertBefore(input);
        }

        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.prev('span').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
                    dummy.remove();
                }
            } else {
                input.prev('span').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).val(def);
            $(this).prev('span').css('visibility', '');
        }
    };

    var fields = $('input, textarea');

    fields.live('mouseup', toggleLabel); // needed for IE reset icon [X]
    fields.live('keydown', toggleLabel);
    fields.live('paste', toggleLabel);
    fields.live('focusin', function() {
        $(this).prev('span').css('color', '#ccc');
    });
    fields.live('focusout', function() {
        $(this).prev('span').css('color', '#999');
    });

    $(function() {
       $('input[placeholder], textarea[placeholder]').each(
           function() { toggleLabel.call(this); }
       );
    });

})(jQuery);

CSS

.placeholder {
  background: white;
  float: left;
  clear: both;
}
.placeholder span {
  position: absolute;
  padding: 5px;
  margin-left: 3px;
  color: #999;
}
.placeholder input, .placeholder textarea {
  position: relative;
  margin: 0;
  border-width: 1px;
  padding: 6px;
  background: transparent;
  font: inherit;
}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .placeholder input, .placeholder textarea { padding: 4px; }
}

Answer 2

Robert Nyman erörtert das Problem und dokumentiert seinen Ansatz in seinem Blog .
Diese Fiedel die alle notwendigen HTML, CSS und JS enthält.

Leider löst er das Problem, indem er die value .
Dies funktioniert per Definition nicht, wenn placeholder Text ist selbst eine gültige Eingabe.

Answer 3

Ich habe diese Frage gefunden, als ich nach der Lösung für das gleiche Problem gegoogelt habe. Es scheint, dass bestehende Plugins entweder nicht in älteren Browsern funktionieren oder Platzhalter bei Fokus ausblenden.

Also beschloss ich, meine eigene Lösung zu entwickeln, wobei ich versuchte, die besten Teile aus bestehenden Plugins zu kombinieren.

Sie können es sich ansehen aquí und öffnen Sie ein Problem, wenn Sie Probleme haben.

Answer 4

Wie wäre es mit etwas Einfachem wie diesem? Beim Fokussieren den Wert des Platzhalterattributs speichern und das Attribut vollständig entfernen; beim Verwischen das Attribut wieder einsetzen:

$('input[type="text"]').focus( function(){
  $(this).attr("data-placeholder",$(this).attr('placeholder')).removeAttr("placeholder");
});
$('input[type="text"]').blur( function(){
  $(this).attr("placeholder",$(this).attr('data-placeholder'));
});

Answer 5

Ich habe meine eigene Lösung nur für css3 geschrieben. Schauen Sie, ob das alle Ihre Bedürfnisse befriedigt.

http://codepen.io/fabiandarga/pen/MayNWm

Das ist meine Lösung:

1. das Eingabeelement wird auf "erforderlich" gesetzt
2. ist ein zusätzliches span-Element für den Platzhalter erforderlich. Dieses Element wird über das Eingabeelement verschoben (Position: absolut;)
3. mit css-Selektoren wird das Eingabeelement auf Gültigkeit getestet (Pflichtfelder sind ungültig, solange es keine Eingabe gibt) und der Platzhalter wird dann ausgeblendet.

Fallstrick: Der Platzhalter blockiert Mausereignisse für die Eingabe! Dieses Problem wird umgangen, indem das Platzhalterelement ausgeblendet wird, wenn sich die Maus im übergeordneten Element (Wrapper) befindet.

<div class="wrapper">
  <input txpe="text" autofocus="autofocus" required/>
  <span class="placeholder">Hier text</span>
</div>

.placeholder {
  display: none;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0px;
  color: #A1A1A1;
}
input:invalid + .placeholder {
  display: block;  /* show the placeholder as long as the "required" field is empty */
}
.wrapper:hover .placeholder {
  display: none; /* required to guarantee the input is clickable */
}

.wrapper{
  position: relative;
  display: inline-block;
}