SQL PHP HTML ASP JavaScript articles and free scripts to download
 
 

Changing to lower case letter of text box data with onBlur event

WE can change the case of entered text inside a text box. We can change the text to all uppercase or to all lower case letters as per the requirements. This is done in case of entering user ids in login forms were all ids are stored in either lower case or upper case letters. If user ids are stored as lower case letters then before comparing we need to convert entered id to lower case and show it to the user that this is the case thy have to enter. For example if some one entered user id as John then it is to be converted as john inside the text box.

We will trigger a function in JavaScript were the function toLowerCase() will be used to convert the uppercase letter to lower case text. This function will be trigged by the onBlur event handler of the text box. This is the text box code we ill use inside the form where we have kept some default text also.

<input type=text name=type value=''Enter USER ID'' onBlur="change_case();">


Now when ever the curser moves out of the text box ( we call it onBlur ) the event handler will trigger the function change_case. Inside this function change_case we will change the value to lower case by using toLowerCase function. Here is the demo of the text box example.

Press Tab or click outside the text box

Here is the complete code.

<html><head><title>(Type a title for your page here)</title>

<script type="text/javascript">
function change_case()
{
document.form1.type.value=document.form1.type.value.toLowerCase();
}
</script>

</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="form1.type.focus();">

<form name=form1 method=post action=''''>
<input type=text name=type value=''Enter USER ID'' onBlur="change_case();">
<input type=submit value=Submit> </form>

</body>
</html>
Further readings
Hide and displaying layers through buttons
Hide and displaying layers through radio buttons
OnClick event of period button
Default value by using OnFocus event of a text box
Showing help text by using onfocus and onBlur event triggers
Text box click event removing data
Text box onBlur click event changing case
Selecting all the data of inside textarea by clicking
Counting the characters dynamically inside a textarea and setting a limit
Copying a set of textbox entered data to another area of a form
Copying data along with drop down list box selection inside a form
Managing browser status bar message onMouseOver & onMouseOut events of a link
OnMouseOver image changing over a link
 
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.

Scripts
PHP
JavaScript
JavaScript Tutorials
Popular Tutorials
Drop down list
Timer function
JavaScript Tutorials
String
Array
Date & Time
Form Validation
Event Handling
Math Functions
Loops & structure
JavaScript Forum
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.