Esto se hace automáticamente para cada navegador excepto Chrome .
Supongo que tengo que apuntar específicamente a Chrome .
Alguna solución?
Si no es con CSS , entonces con jQuery ?
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:
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:
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; }