I have this div that uses 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>
And I need to find a way (probably add an if statement) to make an exception for a few words like "of" instead of "Of". What is your suggestion?
I wanted to use this function but it doesn't work. I know I'm missing something:
function lowerCasedWords() {
let text = document.getElementById('titleInput').value;
if (text.includes('Of') === 'true'){
text.replace('Of', 'of')
}
}
First you can't "mixt" CSS and Javascript. If you don't remove text-transform: capitalize; on the input no matter what your function does.
Since you want to exclude some words it is better to do it all using JS.
Second the input value needs to be updated everytime a key is pressed (or maybe everytime the space key is pressed).
Last in your function it is not enought to replace 'Of' by 'of' you need to replace your input's value attribute.
Here is a working example
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">