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.