He estado siguiendo este pequeño tutorial para agregar Una animación para el marcador de posición de un campo de entrada. La animación mueve el marcador de posición fuera del campo de entrada cuando el campo de entrada está enfocado.

Esta animación funciona perfectamente en un campo de entrada, y el marcador de posición es visible sobre el campo de entrada, pero cuando agrego esta animación a un área de texto, el marcador de posición desaparece una vez que pasa el borde del área de texto.

 input,
textarea {
  margin: 30px 0 0 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{ 
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
}
<input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
<textarea rows="8" cols="60" placeholder="Message *" required="required"></textarea>

Aquí hay un JSFiddle para demostrar el problema.

¿Alguien tiene una idea de cómo puedo mostrar el marcador de posición del área de texto sobre él?

6
MichaelSoe 4 ene. 2017 a las 16:27

4 respuestas

Por cierto, creo simplemente CSS:

input.form-control::-webkit-input-placeholder {
    transition: transform .3s ease-out;
    transform-origin: 0 0;
}
input.form-control:focus::-webkit-input-placeholder {
    transform: translateY(-10px) scale(0.8);
    transform-origin: 0 0;
}

Por ejemplo, como aquí http://www.rusfond-finans.ru/loans/orderzaim .phtml

0
Max Tusken 23 ene. 2018 a las 11:11

Aquí hay una solución alternativa, deberá agregar una etiqueta de envoltura y también agregar el siguiente estilo:

.textarea-wrapper {
  position: relative;
}
textarea::-webkit-input-placeholder {
 position: absolute;
 top: 0;
 left: 0;
}

JSFiddle

Captura de pantalla:

Output

0
Ali Abdelfattah 7 ene. 2017 a las 02:42

Parece que el navegador oculta el texto del marcador de posición de un <textarea>. Una manera fácil de eludir este comportamiento es darle al elemento textarea::-webkit-input-placeholder un position: absolute;. Esto, sin embargo, tiene el inconveniente de que no puede colocarlo correctamente.

div {
  position: relative;
  margin: 30px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

textarea::-webkit-input-placeholder {
  position: absolute;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{ 
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
}
<div>
  <input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
</div>
<div>
  <textarea rows="8" cols="60" placeholder="Message *" required="required"></textarea>
</div>
0
ssc-hrep3 4 ene. 2017 a las 17:28
input,
textarea {
  margin: 30px 0 0 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{ 
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
 position: absolute;
}

Solo necesita agregar la posición como absoluta cuando el marcador de posición está enfocado

0
Neha Agarwal 4 ene. 2017 a las 14:25