Firefox 15 e IE 10+ también lo admiten ahora. Para ampliar la solución CSS de Casey Chu:

 input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */ 

Aquí hay una solución exclusiva de CSS (por ahora, solo funciona en WebKit):

 input:focus::-webkit-input-placeholder { opacity: 0; } 

¿Has probado el marcador de posición?

-EDITAR-

Ya veo, intenta esto entonces:

 $(function () { $('#myId').data('holder', $('#myId').attr('placeholder')); $('#myId').focusin(function () { $(this).attr('placeholder', ''); }); $('#myId').focusout(function () { $(this).attr('placeholder', $(this).data('holder')); }); }); 

Prueba: http://jsfiddle.net/mPLFf/4/

-EDITAR-

En realidad, dado que el marcador de posición debe usarse para describir el valor, no el nombre de la entrada. Sugiero la siguiente alternativa

html:

  First Name   

javascript:

 $('.overlabel').each(function () { var $this = $(this); var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea'); var span = $(this).find('> span'); var onBlur = function () { if ($.trim(field.val()) == '') { field.val(''); span.fadeIn(100); } else { span.fadeTo(100, 0); } }; field.focus(function () { span.fadeOut(100); }).blur(onBlur); onBlur(); }); 

css:

 .overlabel { border: 0.1em solid; color: #aaa; position: relative; display: inline-block; vertical-align: middle; min-height: 2.2em; } .overlabel span { position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overlabel span, .overlabel input { text-align: left; font-size: 1em; line-height: 2em; padding: 0 0.5em; margin: 0; background: transparent; -webkit-appearance: none; /* prevent ios styling */ border-width: 0; width: 100%; outline: 0; } 

Prueba:

http://jsfiddle.net/kwynwrcf/

Solución Pure CSS (no se requiere JS)

Sobre la base de las respuestas de @Hexodus y @Casey Chu, aquí hay una solución actualizada y de varios navegadores que aprovecha la opacidad de CSS y las transiciones para atenuar el texto del marcador de posición. Funciona para cualquier elemento que pueda usar marcadores de posición, incluidos textarea y tags de input .

 ::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; } /* Chrome <=56, Safari < 10 */ :-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */ ::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */ :-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */ ::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */ *:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */ *:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */ *:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */ *:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */ *:focus::placeholder { opacity: 0; } /* Modern Browsers */ 

Editar: actualizado para admitir navegadores modernos.

Para boost la respuesta de @ casey-chu’s y pirate rob, aquí hay una forma más compatible con el navegador cruzado:

  /* WebKit browsers */ input:focus::-webkit-input-placeholder { color:transparent; } /* Mozilla Firefox 4 to 18 */ input:focus:-moz-placeholder { color:transparent; } /* Mozilla Firefox 19+ */ input:focus::-moz-placeholder { color:transparent; } /* Internet Explorer 10+ */ input:focus:-ms-input-placeholder { color:transparent; } 

La respuesta de Toni es buena, pero preferiría soltar la ID y usar explícitamente la input , de esa forma todas las entradas con placeholder obtienen el comportamiento:

Tenga en cuenta que $(function(){ }); es la abreviatura de $(document).ready(function(){ }); :

 $(function(){ $('input').data('holder',$('input').attr('placeholder')); $('input').focusin(function(){ $(this).attr('placeholder',''); }); $('input').focusout(function(){ $(this).attr('placeholder',$(this).data('holder')); }); }) 

Manifestación.

Me gusta empaquetar esto en el espacio de nombres y ejecutar elementos con el atributo “marcador de posición” …

 $("[placeholder]").togglePlaceholder(); $.fn.togglePlaceholder = function() { return this.each(function() { $(this) .data("holder", $(this).attr("placeholder")) .focusin(function(){ $(this).attr('placeholder',''); }) .focusout(function(){ $(this).attr('placeholder',$(this).data('holder')); }); }); }; 

Para refinar aún más la muestra de código de Wallace Sidhrée :

 $(function() { $('input').focusin(function() { input = $(this); input.data('place-holder-text', input.attr('placeholder')) input.attr('placeholder', ''); }); $('input').focusout(function() { input = $(this); input.attr('placeholder', input.data('place-holder-text')); }); }) 

Esto garantiza que cada entrada almacena el texto de marcador de posición correcto en el atributo de datos.

Vea un ejemplo de trabajo aquí en jsFiddle .

Me gusta el enfoque css condimentado con transiciones. En Focus, el marcador de posición se desvanece;) Funciona también para textareas.

Gracias @Casey Chu por la gran idea.

 textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { color: #fff; opacity: 0.4; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder { opacity: 0; } 

Usando SCSS junto con http://bourbon.io/ , esta solución es simple, elegante y funciona en todos los navegadores web:

 input:focus { @include placeholder() { color: transparent; } } 

Use Bourbon! Es bueno para ti !

A veces necesita SPECIFICITY para asegurarse de que sus estilos se apliquen con la id factor más fuerte. Gracias a @Rob Fletcher por su gran respuesta, en nuestra empresa hemos utilizado

Por lo tanto, considere agregar estilos con el prefijo del contenedor de la aplicación

  #app input:focus::-webkit-input-placeholder, #app textarea:focus::-webkit-input-placeholder { color: #FFFFFF; } #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder { color: #FFFFFF; } 

Esta pieza de CSS funcionó para mí:

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

Para una solución pura basada en CSS:

 input:focus::-webkit-input-placeholder {color:transparent;} input:focus::-moz-placeholder {color:transparent;} input:-moz-placeholder {color:transparent;} 

Nota: Aún no es compatible con todos los proveedores de navegadores.

Referencia: Ocultar texto de marcador de posición en el enfoque con CSS de Ilia Raiskin.

HTML:

jQuery:

 $('#myInput').focus(function(){ $(this).attr('placeholder',''); }); $('#myInput').focusout(function(){ $(this).attr('placeholder','enter your text'); }); 

Demo está aquí: jsfiddle

Prueba esto :

 //auto-hide-placeholder-text-upon-focus if(!$.browser.webkit){ $("input").each( function(){ $(this).data('holder',$(this).attr('placeholder')); $(this).focusin(function(){ $(this).attr('placeholder',''); }); $(this).focusout(function(){ $(this).attr('placeholder',$(this).data('holder')); }); }); } 

para la entrada

 input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } 

para textarea

 textarea:focus::-webkit-input-placeholder { color:transparent; } textarea:focus:-moz-placeholder { color:transparent; } 

 $("input[placeholder]").focusin(function () { $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', ''); }) .focusout(function () { $(this).attr('placeholder', $(this).data('place-holder-text')); }); 

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

2018> JQUERY v.3.3 SOLUCIÓN: Trabajando globalmente para todas las entradas, textarea con marcador de posición.

  $(function(){ $('input, textarea').on('focus', function(){ if($(this).attr('placeholder')){ window.oldph = $(this).attr('placeholder'); $(this).attr('placeholder', ' '); }; }); $('input, textarea').on('blur', function(){ if($(this).attr('placeholder')){ $(this).attr('placeholder', window.oldph); }; }); }); 

Además de todo lo anterior, tengo dos ideas.

Puede agregar un elemento que imite al marcador de posición. Luego, use el control javascript para mostrar y ocultar el elemento.

Pero es tan complejo, el otro está usando el selector de css del hermano. Así es:

 .placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; } .send-message input:focus + .placeholder { display: none; } 

prueba esta función:

+ Oculta el PlaceHolder en el foco y lo devuelve al desenfoque

+ Esta función depende del selector de marcador de posición, primero selecciona los elementos con el atributo de marcador de posición, activa una función para enfocar y otra para desenfocar.

en foco: agrega un atributo “data-text” al elemento que obtiene su valor del atributo placeholder y luego elimina el valor del atributo placeholder.

en desenfoque: devuelve el valor del marcador de posición y lo elimina del atributo de texto de datos

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

me puedes seguir muy bien si miras lo que sucede detrás de las escenas inspeccionando el elemento de entrada

 /* Webkit */ [placeholder]:focus::-webkit-input-placeholder { opacity: 0; } /* Firefox < 19 */ [placeholder]:focus:-moz-placeholder { opacity: 0; } /* Firefox > 19 */ [placeholder]:focus::-moz-placeholder { opacity: 0; } /* Internet Explorer 10 */ [placeholder]:focus:-ms-input-placeholder { opacity: 0; } 

Lo mismo que he aplicado en angular 5.

Creé una nueva cadena para almacenar marcador de posición

 newPlaceholder:string; 

luego utilicé las funciones de enfoque y desenfoque en el cuadro de entrada (estoy usando autocompletar primo ng).

Por encima de marcador de posición se establece a partir de typescript

Dos funciones que estoy usando –

 /* Event fired on focus to textbox*/ Focus(data) { this.newPlaceholder = data.target.placeholder; this.placeholder = ''; } /* Event fired on mouse out*/ Blur(data) { this.placeholder = this.newPlaceholder; }