Title Case Using JavaScript

Posted Date: 28 Sep 2009	Resource Type: Code Snippets	Category: Javascript
Author: Ramesh S	Member Level: Gold
Rating:	Points: 10

Title Case Using JavaScript

Title Case

Title Case means to set the first character in each word to uppercase and the rest to lowercase. Sometimes it is called InitCap.

Title Case Using JavaScript

JavaScript does not have built-in function to convert a string into Title Case. We need to do it manually using our own logic.

I have written the following code snippet which will help you convert a text into Title Case (Init Cap) using JavaScript.

Logic

I have used the following simple logic to convert a text into title case.

1. Split the text into an array of strings using split() method
2. Convert the first character into uppercase and other characters to lower case in each string.
3. Concatenate each string

The function is called in the onblur event of a TextBox control so that text will be converted into title case when you press Tab key after entering some text in the TextBox.

Code Snippet

The JavaScript TitleCase() function in the following code snippet accepts a TextBox control, converts its value to Title Case and returns the output string. I have also used some ASP.NET code to test this funciton.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TitleCaseDemo.aspx.cs" Inherits="TitleCaseDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>TitleCase Using JavaScript</title>

    <script type="text/javascript" language="javascript">

        function TitleCase(objField) 
        {
            var objValues = objField.value.split(" ");
            var outText = "";
            for (var i = 0; i < objValues.length; i++) {
                outText = outText + objValues[i].substr(0, 1).toUpperCase() + objValues[i].substr(1).toLowerCase() + ((i < objValues.length - 1) ? " " : "");
            }
            return outText;
        }       
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" onblur="this.value=TitleCase(this);" runat="server" />
        <asp:TextBox ID="TextBox2" runat="server" />
    </div>
    </form>
</body>
</html>

Responses

No responses found. Be the first to respond and make money from revenue sharing program.

Feedbacks

Popular Tags

What are tags ?

Search Tags

Title Case Using JavaScript . InitCap in JavaScript .

Post Feedback

This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.

	Next Resource: Disable Back button of Browser.
	Previous Resource: Enter only digits in textbox using javascript.
	Return to Discussion Resource Index
	Post New Resource
	Category: Javascript

Post resources and earn money!

More Resources