1

¿alguno podría decirme de que forma puedo hacer que mi textarea en un formulario html, tenga un color de fondo y cuando se empiece escribir sobre ella cambie a blanco?

Un saludo,

1
  • Se puede hacer con asignando el evento click al text area, cuando lo detecte que cambie el color. Commented el 22 abr. 2020 a las 9:47

2 respuestas 2

1

Con CSS es muy fácil (fiddle):

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<style>
  .tomatxt{background:#ff6347}
  .tomatxt:focus{background:#fff}
</style>
</head>

<body>
<form>
<textarea class="tomatxt" rows="6" cols="40" placeholder="Ejemplo..."></textarea>
</form>
</body>
</html>

La pseudo-clase :focus hace un gran trabajo aquí!

Leí tu comentario y reemplacé id="tomatxt" (#tomatxt{}) con class="tomatxt" (.tomatxt{}).

Si desea aplicar el estilo a todas las textarea de su página, entonces también está bien:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<style>
  textarea{background:#ff6347}
  textarea:focus{background:#fff}
</style>
</head>

<body>
<form>
<textarea rows="6" cols="40" placeholder="Ejemplo..."></textarea>
</form>
</body>
</html>

Para resumir, #tomatxt{} asigna el estilo a solo una textarea, .tomatxt{} a más de una (todas las con class="tomatxt"), textarea{} a todas.

Lo siento pero solo hablo italiano y utilicé el traductor de Google :)

0
1

Este es el text area que en principio aparecerá en color de fondo gris:

<textarea rows="6" cols="50">
        Este textarea cambiará de color al detectar el click.
</textarea>
<textarea rows="6" cols="50">
        Este también cambiará de manera dinamica als er recorrido con un for.
</textarea>

Con el siguiente Script se detecta cuando se haga click en el text area y entonces cambia el color de fondo a blanco:

<script>
      window.onload = function() {
      let elementos = document.getElementsByTagName("textarea");
      for (var i = 0 ; i < elementos.length; i++) {
          elementos[i].addEventListener('click', function() {
                this.style.backgroundColor = "white";
             });
          }
      }
</script>

Aunque te recomiendo poner el color gris de fondo en tu archivo css o ponerlo en linea (css en linea). Espero te sirva.

4
  • 1
    Hola, funciona, pero solo con un textarea, si le pongo la id a un segundo ya no funciona. ¿Como podría hacerlo para todos? Commented el 22 abr. 2020 a las 10:26
  • @AlejandroGonzalez ya te lo he modificado, lo he hecho recorrido con un for, en la variable elementos se almacen todos los elementos que sean "textarea" lo recorro con un for y al elemento recorrido le asigno el evento click y cuando este detecte el evento cambairá de color al elemento que has hecho click. Commented el 22 abr. 2020 a las 12:24
  • Muchas gracias!!!! Y para ponerlo un poco más dificil. Tambien tengo input y select el formulario. ¿Si quiero hacer lo mismo con los 3 tipos? Commented el 22 abr. 2020 a las 13:36
  • @AlejandroGonzalez si te sirvió entonces mi respuesta marcala como solucionada, tendrás que guardarte los elementos tambien en un array y recorrerlos y hacer lo mismo, el tipo de estilo que le quieras aplicar a cada (this) en los for de los elementos que necesites. Commented el 22 abr. 2020 a las 13:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.