JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container input-capitalize">
  <input type="text" class="intext" id="">
  <input type="text" class="intext" id="">
</div>


<!-- <form>
    <label for="inputName">Name:</label>
    
    <input type="text" id="inputName" oninput="capitalizeFirstLetter()">
  </form> -->

  <script>
    function capitalizeFirstLetter() {
      /* let input = document.getElementById("inputName");
      input.value = input.value.charAt(0).toUpperCase() + input.value.slice(1); */
      const inputCapitalize = document.querySelector('.input-capitalize');
      let inputTexts = inputCapitalize.getElementsByClassName('intext');
      for (let i = 0; i < inputTexts.length; i++) {
      	inputTexts[i].addEventListener('input', function (e) {
          const target = e.currentTarget;
          target.value = target.value.charAt(0).toUpperCase() + target.value.slice(1);
      	});
    	}
    }
    capitalizeFirstLetter()
    
   
  </script>

CSS

/* input {
      text-transform: capitalize;
    } */