html5 - con - placeholder dom

El marcador de posición HTML5 desaparece en el foco

Question

¿Existe un complemento jQuery disponible gratuitamente que cambie el comportamiento del placeholder para que coincida con la especificación HTML5?

Antes de enfocar

En Focus Good (Safari)

En Focus Bad (Chrome, Firefox)

Puedes hacer lo que tu navegador hace con este simple violín .

La especificación del borrador HTML5 dice :

Los agentes de usuario deben presentar esta sugerencia al usuario, después de haber eliminado los saltos de línea, cuando el valor del elemento es la cadena vacía y / o el control no está enfocado (por ejemplo, mostrándolo dentro de un control no enfocado en blanco y ocultándolo de otra manera).

El "/ o" es nuevo en el borrador actual, así que supongo que es por eso que Chrome y Firefox aún no lo admiten. Consulte el error # 73629 , error de Chromium # 103025 de WebKit .

Answer 1

¿Qué tal algo simple como esto? Al enfocar, guarde el valor del atributo de marcador de posición y elimine el atributo por completo; en el desenfoque, vuelva a poner el atributo:

$(''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 2

Encontré esta pregunta buscando en Google la solución al mismo problema. Parece que los complementos existentes o no funcionan en navegadores antiguos o ocultan el marcador de posición en el foco.

Así que decidí utilizar mi propia solución al intentar combinar las mejores partes de los complementos existentes.

Puede verlo here y abrir un problema si tiene algún problema.

Answer 3

Escribí mi propia solución css3 única. Vea si eso satisface todas sus necesidades.

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

Esta es mi solución:

1. el elemento de entrada se establece en "requerido"
2. se necesita un elemento de intervalo adicional para el marcador de posición. Este elemento se mueve sobre el elemento de entrada (posición: absoluto;)
3. con los selectores de css, se comprueba la validez del elemento de entrada (los campos obligatorios no son válidos mientras no haya entrada) y el marcador de posición se oculta.

Pitfall: ¡ El marcador de posición está bloqueando los eventos del mouse en la entrada! Este problema se evita ocultando el elemento de marcador de posición cuando el mouse está dentro del elemento primario (envoltorio).

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

Answer 4

Robert Nyman analiza el problema y documenta su enfoque en su blog .
Este violín que tiene todos los HTML, CSS y JS necesarios.

Desafortunadamente, él resuelve el problema cambiando el value .
Esto no funcionará por definición si el texto del placeholder es en sí mismo una entrada válida.

Answer 5

Tal vez puedas probar con el patrón de etiqueta flotante :)

Ver etiquetas flotantes en CSS

Answer 6

Stefano J. Attardi escribió un bonito plugin jQuery que simplemente hace eso.
Es más estable que el de Robert y también se desvanece a un gris más claro cuando el campo se enfoca.

• Ver la página de demostración.
• Agárralo en GitHub
• Juega con el violín

Modifiqué su complemento para leer el atributo de placeholder en lugar de crear manualmente un span .
Este violín tiene código completo:

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