How to capitalize the first letter of each word using JQuery and CSS

In this article, we will learn how to capitalize the first letter of each word being entered in a text input field of a form using jQuery. You can download the latest version of jQuery from https://jquery.com/download/ or you can use Google CDN to link jQuery in your HTML document.

For this piece of code, we will be using Google CDN to include jQuery in our program.

Add the following code to your page header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="holder">
  <div class="input-holder">
    <input id="username" class="input" type="text" placeholder=" ">
    <div class="placeholder">Your Name</div>
  </div>
</div>

.holder {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;

}


.input-holder {
  position: relative;
}

.input {
    height: 28px;
    font-size: 14px;
    padding: 13px 15px;
    border-radius: 4px;
    border: 1px solid grey;
    width: 300px;
    outline: none;
    color:grey;
}

 .input:not(:placeholder-shown).input:not(:focus) + .placeholder {
  transform: scale(.75) translateY(-39px) translateX(-5px);
  color: grey;
}


.input:focus {
  border-color: #14A9E0;
}

.input:focus + .placeholder {
  transform: scale(.75) translateY(-39px) translateX(-5px);
  color: #14A9E0;
}

.placeholder {
  position: absolute;
  top: 20px;
  left: 8px;
  padding: 0 8px;
  background-color: white;
  transition: transform 150ms cubic-bezier(0.4,0,0.2,1), opacity 150ms cubic-bezier(0.4,0,0.2,1);
  color: grey;
}

This is how your form will look like:

Now add the following jQuery code:

        $(document).ready(function () {
            $("#username").keyup(function () {
                $('#username').css('textTransform', 'capitalize');
            });
        });

How to capitalize the first letter of each word using JQuery and CSS

Comments

Write a Reply or Comment Cancel reply