To change input text to upper case with JavaScript, we can use CSS or listen to the keyup event and change the inputted text to upper case in it.
For instance, we can write:
<input style="text-transform: uppercase" type="text" />
to add the text-transform CSS property and set its value to uppercase to turn all the inputted text to upper case.
To do the same thing with JavaScript, we can listen to the keyup event by writing the following HTML:
<input type="text" />
Then we can listen to the keyup event by writing:
const input = document.querySelector('input')
input.addEventListener('keyup', (e) => {
input.value = e.target.value.toUpperCase()
})
We call document.querySelector to select the input.
Then we call input.addEventListener with 'keyup' to listen to the keyup event.
In the event handler, we assign e.target.value.toUpperCase() to input.value to change the value entered into the input element to upper case.
