How to capitalize first letter of textarea HTML?

user_17101913 0
Viewed 345

I am a newbie in web programming and I am looking for a way to capitalize just the first letter of a textarea. I've already tried this solution found on the web but it doesn't work.

<p class="textarea_part">
    <textarea name="#" placeholder="La tua richiesta"></textarea>
</p>

<style>
    .textarea_part::first-letter {
         text-transform: capitalize;
     }
</style>

How can I solve this problem?

css html javascript
1 Answers

Using javascript:

document.querySelector('.textarea_text').addEventListener('input', () => {
  text = document.querySelector('.textarea_text').value;
  document.querySelector('.textarea_text').value = text.charAt(0).toUpperCase() + text.slice(1);
})
<p class="textarea_part">
    <textarea name="#" placeholder="La tua richiesta" class="textarea_text"></textarea>
</p>

Thanks, @marcus-parsons for informing me of the input event listener! It's much faster for the javascript method now.

user_147768990
Related