Tengo este div que usa text-transorm: capitalize :
<div style="display: flex;align-items:center; width: 400px; justify-content: space-between ; max-width: 100%;"> <p style="margin: 10px 0">Title</p> <input type="text" id="titleInput" style="width: 300px; text-transform: capitalize;" onkeyup="getIputValue(`titleInput`, `title`)" /> </div>Y necesito encontrar una manera (probablemente agregar una declaración if) para hacer una excepción para algunas palabras como "de" en lugar de "De". ¿Cuál es tu sugerencia?
Quería usar esta función pero no funciona. Sé que me estoy perdiendo algo:
function lowerCasedWords() { let text = document.getElementById('titleInput').value; if (text.includes('Of') === 'true'){ text.replace('Of', 'of') } }Primero, no puedes "mezclar" CSS y Javascript. Si no elimina text-transform: capitalize; en la input sin importar lo que haga su función. Como desea excluir algunas palabras, es mejor hacerlo todo usando JS.
En segundo lugar, el valor de entrada debe actualizarse cada vez que se presiona una tecla (o tal vez cada vez que se presiona la tecla de espacio).
Por último, en su función, no es suficiente reemplazar 'De' por 'de', debe reemplazar el atributo de valor de su entrada.
Aquí hay un ejemplo de trabajo
const input = document.getElementById('input'); const capitalize = word => { return word ? word[0].toUpperCase() + word.substr(1).toLowerCase() : ''; } const noCapNeeded = ['of', 'a']; input.addEventListener('input', evt => { input.value = input.value.toLowerCase().split(' ').map(word => { return noCapNeeded.includes(word) ? word : capitalize(word); }).join(' '); }); <input type="text" id="input">