> Faqs > Cambiar color de letras de un campo de texto text de formulario con Javascript

Cambiar color de letras de un campo de texto text de formulario con Javascript

Como puedo cambiar el color de un campo de texto de formulario con Javascript? Se hacerlo con estilos CSS cuando defino los estilos de la página, pero no me vale.

Respuestas

Lo que quiero es que, con Javascript, cuando se escriba un texto en un campo de texto específico que el texto de este campo text de formulario cambie de color. Es decir, que pueda cambiar el color de un campo de texto una vez la página ha sido cargada, con javascript como respuesta a un evento de usuario.

Para cambiar con Javascript una propiedad de estilos CSS de un elemento de la página existe la propiedad style, que tienen, entre otros, los campos de texto de formularios.

De la propiedad style dependen varios otros atributos, en concreto para cambiar el color tienes que modificar el atributo color.

Entonces el procedimiento es este:

  • Accceder al campo de texto mediante el DOM de objetos del navegador
  • Sobre el campo de texto hacer uso de la propiedad style y luego la propiedad color.

Al DOM puedes acceder de dos modos:

1) Acceso a través del propio objeto formulario:

Sería un código como este:

 document.miformulario.campotexto.style.color="#00ff00";

2) Acceso mediante su identificador

Otra opción es acceder al campo de formulario por su identificador (atributo id):

<input type="text" name="campo" id="idcampo">

Entonces para acceder al input haces document.getElementById('idcampo'). Una vez tienes el elemento en una variable, modificas el style como viste antes. El código sería el siguiente:

var campo = document.getElementById('idcampo');
campo.style.color="#00ff00";
Miguel Angel
2320 107 158 7