0

Este código lo encontré aquí ¿Como puedo hacer para que aparezcan las primeras letras de las palabras en mayusculas? pero no lo sé adaptar. Lo que quiero es lo mismo que hace el script, pero en vez de mostrar como va quedando en el PRE, que lo valla modificando dentro del INPUT TEXT.

Con la ayuda lo hice de esta forma, pero no funciona, escribo texto en el INPUT y queda como lo escribo.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="../jquery.min.js"></script>
<script type="text/javascript">
//Leva a mayúsculas la primera letra de cada palabra
function titleCase(texto) {
    const re = /(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])(?:([a-záéíóúüñ])|([A-ZÁÉÍÓÚÜÑ]))|([A-ZÁÉÍÓÚÜÑ]+)/gu;
    return texto.replace(re,
        (m, caracterPrevio, minuscInicial, mayuscInicial, mayuscIntermedias) => {
            const locale = ['es', 'gl', 'ca', 'pt', 'en'];
            //Son letras mayúsculas en el medio de la palabra
            // => llevar a minúsculas.
            if (mayuscIntermedias)
                return mayuscIntermedias.toLocaleLowerCase(locale);
            //Es la letra inicial de la palabra
            // => dejar el caracter previo como está.
            // => si la primera letra es minúscula, capitalizar
            //    sino, dejar como está.
            return caracterPrevio
                 + (minuscInicial ? minuscInicial.toLocaleUpperCase(locale) : mayuscInicial);
        }
    );
}

document.getElementById('ingreso')
    .addEventListener('input',
        event => {
            document.getElementById('ingreso')
                .value = titleCase(event.target.value);
        }
    );
</script>
</head>
<body>
<input type="text"
       id="ingreso"
       placeholder="Escribí texto para llevar a mayúsculas la primera letra de cada palabra"
       style="width:100%">
</body>
</html>

1 respuesta 1

1

Solo tienes que cambiar el id y la propiedad innerText por value.
Quedaria asi:

//Leva a mayúsculas la primera letra de cada palabra
function titleCase(texto) {
    const re = /(^|[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ])(?:([a-záéíóúüñ])|([A-ZÁÉÍÓÚÜÑ]))|([A-ZÁÉÍÓÚÜÑ]+)/gu;
    return texto.replace(re,
        (m, caracterPrevio, minuscInicial, mayuscInicial, mayuscIntermedias) => {
            const locale = ['es', 'gl', 'ca', 'pt', 'en'];
            //Son letras mayúsculas en el medio de la palabra
            // => llevar a minúsculas.
            if (mayuscIntermedias)
                return mayuscIntermedias.toLocaleLowerCase(locale);
            //Es la letra inicial de la palabra
            // => dejar el caracter previo como está.
            // => si la primera letra es minúscula, capitalizar
            //    sino, dejar como está.
            return caracterPrevio
                 + (minuscInicial ? minuscInicial.toLocaleUpperCase(locale) : mayuscInicial);
        }
    );
}

//Evento para mostrar el resultado cada vez que se ingresa un caracter
document.getElementById('ingreso')
    .addEventListener('input',
        event => {
            document.getElementById('ingreso')
                .value = titleCase(event.target.value);
        }
    );
<input type="text"
       id="ingreso"
       placeholder="Escribí texto para llevar a mayúsculas la primera letra de cada palabra"
       style="width:100%">
<pre id="resultado">

1
  • Acabo de probarlo ejecutándolo aquí y funciona pero no en un HTML. Commented el 7 mar. 2022 a las 19:19

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.