Puedes usar el atributo HTML onkeyup
para ejecutar la función que se encargará de dar formato al texto del input
.
La idea es poner en mayúscula la primera letra, y el resto deben estar en minúsculas. Es lo que entiendo de tu pregunta.
Si el usuario escribe todo en mayúsculas, tu implementación cambiará a mayúscula solo la primera letra y el resto las pondrá en minúsculas. En caso que el usuario escriba todo en minúsculas, pues se cambiará la primera letra a mayúsculas.
En tu pregunta no estableces qué sucede si son 2 o más palabras, es decir, ¿si el usuario escribe más de una palabra en el input
, cuál es el comportamiento deseado?
Asumiendo que se trata del caso en que se escribe 1 sola palabra, entonces podrías hacerlo así:
//instanciamos el elemento input
var input = document.getElementById('entrada');
//función que capitaliza la primera letra
function capitalizarPrimeraLetra() {
//almacenamos el valor del input
var palabra = input.value;
//Si el valor es nulo o undefined salimos
if(!input.value) return;
// almacenamos la mayuscula
var mayuscula = palabra.substring(0,1).toUpperCase();
//si la palabra tiene más de una letra almacenamos las minúsculas
if (palabra.length > 0) {
var minuscula = palabra.substring(1).toLowerCase();
}
//escribimos la palabra con la primera letra mayuscula
input.value = mayuscula.concat(minuscula);
}
<form style="margin: 1rem;">
<label for="entrada">Introduzca 1 palabra:</label><br>
<input id="entrada" name="entrada" onkeyup="capitalizarPrimeraLetra()" />
</form>
Espero que esto te ayude a resolver tu problema.