How to convert first letter of a string to upper case using jQuery ?
The task is to capitalize the first letter of string without using toUpperCase() method with the help of jQuery. There are two approaches that are discussed below:
Approach 1: In this example, the css() method is used to used to set the text-transform property value to capitalize.
Example:
<!DOCTYPE HTML> <html> <head> <title> How to convert first letter of a string to upper case using jQuery? </title> <script src= </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p> Click on the button to perform the operation. </p> Type Here: <input id = "input"/> <br><br> <button onclick = "GFG_Fun()"> Click Here </button> <p id = "GFG"></p> <script> var geeks = document.getElementById('GFG'); function GFG_Fun() { $('#input').css('textTransform', 'capitalize'); geeks.innerHTML = "Text is capitalized"; } </script> </body> </html> |
Output:
Approach 2: In this example, we are using CSS property to perform the operation. A new ID has been added to the element which sets the property text-transform to capitalize.
Example:
<!DOCTYPE HTML> <html> <head> <title> How to convert first letter of a string to upper case using jQuery? </title> <script src= </script> <style> #capital { text-transform: capitalize; } </style> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p> Click on the button to perform the operation. </p> Type Here: <input id = "input"/> <br><br> <button onclick = "GFG_Fun()"> Click Here </button> <p id = "GFG"></p> <script> var geeks = document.getElementById('GFG'); function GFG_Fun() { $('#input').attr('id', 'capital'); geeks.innerHTML = "Text is capitalized"; } </script> </body> </html> |
Output:
Please Login to comment...