Formatear a un mismo tipo de letra un campo de texto con JS [SOLUCIONADO]

Paso inicial: Obtener la referencia al campo de texto

Antes de aplicar cualquier tipo de formato, primero debemos seleccionar el campo de texto que deseamos modificar. Esto lo podemos hacer utilizando los selectores de DOM (Document Object Model). Supongamos que tenemos un campo de texto con un id específico:

<input type="text" id="myTextField" />

Copiar

Podemos obtener una referencia a este campo de texto con el siguiente código JavaScript:

var textField = document.getElementById('myTextField');

Copiar

Aplicar el tipo de letra deseado

Con la referencia obtenida, procedemos a modificar el estilo del campo. JavaScript permite el acceso a la propiedad style de un elemento del DOM, mediante la cual podemos cambiar su apariencia. Para ello, establecemos la propiedad font-family del objeto style del campo de texto:

textField.style.fontFamily = 'Arial, sans-serif';

Copiar

Al asignar el valor ‘Arial, sans-serif’, estamos definiendo que el tipo de letra del campo de texto será Arial, y en caso de que este no esté disponible, se utilizará la fuente sans-serif genérica.

Creación de una función reutilizable

Para optimizar nuestro código y hacerlo más mantenible, es recomendable crear una función reutilizable que nos permita aplicar el estilo a cualquier campo de texto. La siguiente función acepta dos parámetros: el selector del campo de texto y el tipo de letra.

function setFontStyle(selector, fontFamily) {
  var textField = document.querySelector(selector);
  if (textField) {
    textField.style.fontFamily = fontFamily;
  }
}

Copiar

Podemos llamar a esta función pasando como argumentos el selector del campo de texto y el tipo de letra deseado:

setFontStyle('#myTextField', 'Courier New, monospace');

Copiar

Así, #myTextField se aplica al campo con ese id, y ‘Courier New, monospace’ establece el tipo de letra a Courier New, utilizando monospace como alternativa.

Consideraciones importantes al aplicar estilos con JavaScript

Al manipular estilos con JavaScript, debemos recordar que nuestras intervenciones pueden interferir con las hojas de estilo en cascada (CSS). Por ello, es importante asegurarnos de que nuestra interacción con el DOM no introduzca conflictos con los estilos predefinidos o las clases que se encuentren aplicadas a los elementos.

Otro aspecto a tener en cuenta es la accesibilidad. Si bien es vital mantener el aspecto visual coherente, debemos asegurarnos de no perjudicar la experiencia del usuario. Elegir tipos de letra legibles y de tamaño adecuado es esencial para mantener la accesibilidad.

Consejos para el manejo dinámico de estilos en JavaScript

Para finalizar, algunas recomendaciones para manejar los estilos dinámicamente:

• Consistencia: Mantén una paleta de tipos de letra consolidada y coherente a lo largo de tu proyecto.
• Performance: Limita la cantidad de manipulaciones en el DOM, ya que estas pueden impactar el rendimiento.
• Hoja de estilos externa: Considera la posibilidad de definir clases en tus CSS y aplicarlas con classList.add() para mejorar la claridad del código y facilitar el mantenimiento.