TextBox Only Write String Character

• Download source code - 3 KB

Introduction

In this article, I will show how to make the script control TextBox have the following value: "Enter String Only". When the user clicks on the TextBox, it becomes blank, and when the user deletes the written value from "Enter String Only", it re-requests an entry, and if the user tries to write a non-string character in the TextBox, that character will not be written.

Using the Code

inputtext_onclick()

When the user deletes words from the entry "Enter String Only" fulltext_befor_new_char is set to "" or to the TextBox value, that function fires when the user clicks on the TextBox.

function inputtext_onclick() 
{ 
// if the TextBox value = "Enter String Only", that means
// the user has not written any words yet, so set the textbox
// value to "" and fulltext_befor_new_char Variable to "" 
if ((TextBox_Element.value == "Enter String Only")) 
{ 
TextBox_Element.value=""; 
fulltext_befor_new_char = ""; 
} 
Else 
// else means the user has written words before as save it in
// fulltext_befor_new_char Variable 
fulltext_befor_new_char = TextBox_Element.value; 
}

inputtext_onblur()

This function is responsible for rewriting "Enter String Only" words if the user doesn't write any words that the function fires when the TextBox loses focus.

function inputtext_onblur() 
{ 
// if the textbox value = "" then the use left the text box empty so
// set textbox value to "Enter String Only" again 
if ((TextBox_Element.value == "")) 
TextBox_Element.value="Enter String Only"; 
}

inputtex_onkeydown(e)

function inputtex_onkeydown(e)
{ 
// check if the user uses Firefox
if (IsFireFox())
{
    // if Firefox uses e.which
    var key_code = e.which ;
}
else 
{
    // if not Firefox, use event.keyCode
    var key_code = event.keyCode ;
}
// check if the user presses backspace key to delete written character
// if not backspace, then check 
if (key_code != 8)
{
    var ch = String.fromCharCode(key_code);
    var filter = /[a-zA-Z]/ ;
    if(!filter.test(ch))
    {
        //Cancel the Input
        if (IsFireFox())
        e.preventDefault(); 
        else
        event.returnValue = false ;
    }
}
} 
function inputtext_onkeypress() 
{ 
var fulltext = TextBox_Element.value; 
// if character legal, then save textbox value in
// fulltext_befor_new_char Variable texbox value to 
if (Filter(fulltext)) 
{ 
fulltext_befor_new_char = TextBox_Element.value; 
} 
Else 
// if character illegal, then set the texbox value to
// fulltext_befor_new_char (old textbox value) 
{ 
TextBox_Element.value = fulltext_befor_new_char; 
} 
}

function inputtex_onchange()

The function responsible for checking if the value is legal or illegal if the user pastes or drops the value:

function inputtex_onchange()
{
var inputtex_vlaue = TextBox_Element.value;
var filter = /^[a-zA-Z]+$/ ;
if(!filter.test(inputtex_vlaue))
    {
        TextBox_Element.value = "Enter String Only";
    }
}
function
add_Events_To_TextBox(TextBox_Name_Client)

The function responsible on adding (onkeydown – onclick – onblur – onchange) events to the textbox in RunTime that the function fires after the document on page Load.

function add_Events_To_TextBox(TextBox_Name_Client) 
{ 
TextBox_Element = document.getElementById(TextBox_Name_Client);
TextBox_Element.onkeydown=function(event)
                    {
                        inputtex_onkeydown(event);
                    };
TextBox_Element.onclick=inputtext_onclick ;
TextBox_Element.onblur=inputtext_onblur;
TextBox_Element.onchange = inputtex_onchange;
}

In the ASPX file, write at the end of <form></form> element:

<script language="javascript" type="text/javascript" src="Unwrite_aspx.js" > 
</script> 
<script language="javascript" type="text/javascript" > 
add_Events_To_TextBox("<%=Unwrite_TestBox.ClientID%>"); 
</script>

Happy coding …

History

• 4^th August, 2007: Initial version