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.
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.
Respuestas:
<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+ */
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 textarea
y input
etiquetas.
::-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:
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; }
opacity:0;
)! ¡La única solución CSS en este hilo con todos los soportes de navegador posibles!
La respuesta de Toni es buena, pero prefiero descartar ID
y usar explícitamente input
, de esa manera todas las entradas con placeholder
el 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'));
});
})
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 id
Gracias 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.
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'));
});
});
}
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; }