Controling the content inside an input box

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).

If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

Source code

2 examples of use filtering characters.

<html>
<head>
<script type="text/javascript">

var phone = "()- 0123456789";
var alpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

function controlchars(thestr,controlstr)
{
	if(controlstr.indexOf(thestr.value.charAt(thestr.value.length - 1)) == -1)
	{
		var x=thestr.value.length - 1;
		thestr.value=thestr.value.substring(0,x)
	}
}
</script>
<body>

<p>
Enter a phone number please:<br />
<input type="text" value="" onkeyup="javascript:controlchars(this,phone);" />
</p>

<p>
Enter your name here:<br />
<input type="text" onkeyup="javascript:controlchars(this,alpha);" value="" />
</p>
</body>
</html>

download the file

- Simply change the data according to your needs and the form;
- there might be some missing control when you type continuously;
- If you paste the data inside the form, it won't be controled as well (we should also use the onpaste event control);

More information here:
MSDN -- Events DHTML

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Mass Article Control #1
Create Thousands Of Articles From only 1 Article and Have them Submitted Automatically With A brand New Submitter!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

Controling the content inside an input box

Controling the content inside an input box

Webmaster Corner

Categories