2012-08-04 35 views
8

He creado una entrada de acuerdo con el siguiente código.El marcador de posición no desaparece al enfocar en Chrome

<div> 
    <form id="me" runat="server"> 
    <input id="stuff" type="text" placeholder="Type here" runat="server" /> 
    </form> 
</div> 

Como esperaba, cuando empiezo a escribir, el texto del marcador de posición desaparece. Eso funciona como se supone en el navegador Burning Cat pero no en el navegador Shiny Metal. ¿Qué lo causa (estilos, etiqueta de servidor, otras cosas ...)? ¿Qué se puede hacer al respecto?

Respuesta

10

Firefox y Chrome (y Safari) actúan de forma diferente en marcadores de posición HTML5. Si quieres cromo a desaparecer los marcadores de posición en el foco, puede utilizar secuencia de comandos siguiente:

$('input:text, textarea').each(function(){ 
    var $this = $(this); 
    $this.data('placeholder', $this.attr('placeholder')) 
     .focus(function(){$this.removeAttr('placeholder');}) 
     .blur(function(){$this.attr('placeholder', $this.data('placeholder'));}); 
}); 
+5

me gustaría considerar este comportamiento como un error. Quiero decir, si necesito agregar algo de JS para hacer desaparecer el marcador de posición, debe llamarse una solución alternativa. ¿O hay una razón válida por la que se comporta de esa manera? –

+6

De hecho, me encanta la forma de Chrome de los marcadores de posición. Le permite usar texto de marcador de posición como etiquetas de campo de formulario INCLUSO si su página se enfoca en uno de los campos. – xamde

+3

El selector debe ser '$ ('[marcador de posición]')' porque hay muchos tipos de entrada que no son texto o área de texto (correo electrónico, etc.) y pueden tener marcador de posición. Además, al nuevo jQuery no le gusta (desafortunadamente) el selector ': text'. – Rudy

0

Se puede usar esta marcador de posición jQuery plugin: placeholderFix. Con este complemento, la etiqueta del marcador de posición funcionará de la misma manera en todos los navegadores, también en navegadores que no la admiten.

28

me encontré con el mismo problema hoy y se le ocurrió una solución pura-CSS Hack:

input:focus::-webkit-input-placeholder { 
    color: transparent; 
} 
+4

+1 por creatividad, pero debo señalar que, mientras ** realmente me gusta ** el enfoque, no es una solución. Es una solución temporal. Aún reclamo que es un error en Chrome. :) –

+0

Además, te perdiste la sintaxis de la etiqueta de idioma. Se supone que es * lang-css * dentro y dos guiones "* - *" al final. Corregí el sytax y ahora tu respuesta se ve aún mejor. –

+0

Estoy completamente de acuerdo. Consideré usar la palabra * hack * en lugar de * solution *, pero por alguna razón fui con el último. Ahora he editado la publicación para reflejar eso. Probé diferentes variantes de la etiqueta de sintaxis pero nada parecía haber funcionado. Ahora creo que pudo haber funcionado pero no me di cuenta porque los colores son muy oscuros. Gracias por la ayuda. –

Cuestiones relacionadas