¿Cómo oculto automáticamente el texto del marcador de posición al enfocar usando css o jquery?


213

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.


ver mi edición entonces, podría ayudar
Toni Michel Caubet

Opera también es otro navegador que elimina el marcador de posición en foco.
Lucas

Firefox a partir de la versión 15 ya no elimina el texto del marcador de posición hasta que comience a escribir. Creo que lo mismo puede ser el caso para IE10 pero no tengo una manera de verificar eso.
Rob Fletcher

1
Me preocupa que nadie mencione el hecho de que no debería molestarse en modificar los comportamientos del navegador nativo. Por mi parte, prefiero que el marcador de posición permanezca presente. Simplemente me ayuda como usuario final, y es una característica que los navegadores ahora están comenzando a implementar ... probablemente porque el comportamiento de desaparecer al enfocar resultó ser un problema de usabilidad. Deje que el navegador sea, por favor.
Ryan Wheale el

"Esto se hace automáticamente para todos los navegadores, excepto Chrome". ¿Ya no? Acabo de probar esto en OSX en Firefox 37.0.2, Safari 7.1.5 y Chrome 42.0. Ninguno de ellos elimina el texto del marcador de posición hasta que empiezo a escribir, y todos lo vuelven a colocar cuando borro el campo.
Nathan Long

Respuestas:


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

2
Esto lo hace funcionar, pero cuando hago clic fuera del campo permanece en blanco.
LondonGuy

2
@LondonGuy: Acabo de editar mi publicación, ver si funciona como quisieras. Pero la solución de Toni Michel Caubet es más agradable
MatuDuke

99
El problema aquí es que esto es molesto JavaScript. La solución de Toni Michel Caubet es mejor.
Silkster

Me gusta, pero desafortunadamente no funciona ni IE ni Safari.
Mohammed Moustafa


455

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+ */

1
¡Gran respuesta! No tengo mucho sentido abandonar mi antigua solución jQuery en favor de HTML5 y luego seguir adelante y agregar JavaScript nuevamente como una solución. Esta es solo la solución que estaba buscando.
nienn

@ MartinHunt, ¿has probado esto en FF? input: focus :: - moz-placeholder
Philip

16
Disculpas por desenterrar un hilo antiguo, pero solo para hacerlo más completo: input: focus: -moz-placeholder es para Firefox 18 y versiones inferiores, para 19 en adelante debes usar: input: focus :: - moz-placeholder (nota El doble colon). Ref: css-tricks.com/snippets/css/style-placeholder-text
Peter Lewis

Este comentario es una victoria. funciona con controles dinámicos, como el kendo también
vuelva a registrar

1
Gran respuesta también de mi parte! Para aquellos de nosotros que también podrían necesitar esta funcionalidad cuando el campo está deshabilitado, aquí está el código CSS: / * Ocultar el texto del marcador de posición (si corresponde), cuando el campo de retención está deshabilitado * / input: disabled :: - webkit-input- marcador de posición {color: transparente; } entrada: deshabilitado: -moz-placeholder {color: transparent; } input: disabled :: - moz-placeholder {color: transparent; } entrada: deshabilitado: -ms-input-placeholder {color: transparent; }
Ramanagom

74

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

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

1
Me gusta esta respuesta, pero el soporte del navegador para esto todavía no está allí.
Jerry

44

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.


66
¡La mejor solución CSS!
Fatih SARI

Buen CSS antiguo ... ¡gran solución simple! ¿Por qué no pensé en eso?
JI-Web

40

¿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/


Es bueno ver el atributo de datos que se utiliza. Pero miraría el equivalente CSS. Cuando se almacena en caché, será una solución más rápida y puede ser global. Lo anterior necesita que el atributo de datos se coloque en cada elemento necesario. (respuesta a continuación)
Neil

1
Esto es demasiado complicado. Podría hacerse con mucho menos código.
JGallardo

@JGallardo muéstrame la luz (pero no estoy seguro si has visto que hay 3 soluciones diferentes)
Toni Michel Caubet

19

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

¡Exactamente lo que he escrito ahora (en lugar de eso lo usé opacity:0;)! ¡La única solución CSS en este hilo con todos los soportes de navegador posibles!
ReynekeVosz

11

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.


3
Esto no funciona si tiene más de un campo. Aquí está la versión mejorada de su código jsfiddle.net/6CzRq/64
svlada

10

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

5

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


5

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

4

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 .


4

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

4

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 !


3

Esta pieza de CSS funcionó para mí:

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

}

1
Esa es una buena manera de hacerlo sin JQuery :)
tehX

3

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.


2

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

1
Esto solo supone una entrada.
nym

2

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

1

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

        });

}

use $ ("input [placeholder]") en su lugar para seleccionar solo los campos que tienen un atributo de marcador de posición.
Silkster

Esta es la mejor respuesta, simple, y deselecciona a los demás cuando está fuera de foco
JGallardo

1

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

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

1
$("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");
    });
});

0

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.


Compruebe esta URL , será útil para mejorar la calidad de su contenido;
Willie Cheng

0

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


0

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

0

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...'">

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

Esta respuesta es idéntica a una respuesta anterior. Si tiene algo que agregar o mejorar, sugiera editar la respuesta original.
JonathanDavidArndt
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.