Esto se hace automáticamente para todos los navegadores, excepto Chrome .

Supongo que tengo que apuntar específicamente a Chrome .

¿Alguna solución?

Si no con CSS , ¿con jQuery ?

Saludos cordiales.

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

Editar: Todos los navegadores son compatibles ahora

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

<input type="text" placeholder="Type something here!">

Firefox 15 e IE 10+ también admiten esto 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 solo para CSS (por ahora, solo funciona en WebKit):

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

Solución CSS pura (no se requiere JS)

Basándose en las respuestas de @Hexodus y @Casey Chu, aquí hay una solución actualizada y de navegador cruzado 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 textareay inputetiquetas.

::-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.

¿Has probado el marcador de posición attr?

<input id ="myID" type="text" placeholder="enter your text " />

-EDITAR-

Ya veo, intente 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:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

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/

Para aumentar la respuesta de @ casey-chu y pirate rob, aquí hay una forma más compatible con varios navegadores:

    /* 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 prefiero descartar IDy usar explícitamente input, de esa manera todas las entradas con placeholderel comportamiento:

<input type="text" placeholder="your text" />

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

A veces necesitas ESPECIFICIDAD para asegurarte de que tus estilos se apliquen con el factor más fuerte idGracias por @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;
    }

Con Pure CSS funcionó para mí. Hazlo transparente cuando se ingresa / se enfoca en la entrada

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

Para refinar aún más el código de muestra 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 almacene 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 áreas de texto.

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

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

¡Usa Bourbon! Es bueno para ti !

Esta pieza de CSS funcionó para mí:

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

}

Para una solución basada en CSS puro:

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

Nota: Todavía no es compatible con todos los proveedores de navegadores.

Referencia: Ocultar texto de marcador de posición en foco con CSS por Ilia Raiskin.

HTML:

<input type="text" name="name" placeholder="enter your text" id="myInput" />

jQuery:

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

2018> JQUERY v.3.3 SOLUCIÓN: Trabajando globalmente para todas las entradas, área de texto 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);
         };
     }); 
});

La demostración 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 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");
    });
});

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

Puede agregar un elemento que imite el marcador de posición. Luego, usando javascript, controle que el elemento se muestre y se oculte.

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

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

23333, tengo un inglés pobre. Espero resolver su problema.

prueba esta función:

+ Oculta el PlaceHolder en foco y lo devuelve a Blur

+ 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 "texto de datos" al elemento que obtiene su valor del atributo marcador de posición y luego elimina el valor del atributo marcador de posición.

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

<input type="text" placeholder="Username" />

$('[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', '');
  });
});

puedes seguirme muy bien si miras lo que sucede detrás de escena inspeccionando el elemento de entrada

Lo mismo que he aplicado en angular 5.

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

newPlaceholder:string;

luego he usado las funciones de enfoque y desenfoque en el cuadro de entrada (estoy usando autocompletar prime ng).

El marcador de posición anterior se establece a partir del mecanografiado

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

No es necesario usar CSS ni JQuery. Puede hacerlo directamente desde la etiqueta de entrada HTML.

Por ejemplo , en el cuadro de correo electrónico debajo, el texto del marcador de posición desaparecerá después de hacer clic adentro y el texto aparecerá nuevamente si se hace clic afuera.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

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