Javascript events: numeric textbox, tab key in a textarea

I've played around with JavaScript key press events quite a bit over the years.

The most comprehensive script I wrote around this subject, is a mask control which we use on our intranet for all kinds of things (Code which I unfortunately can't share with you, else I might get shot or something).

Just to get the ball on the roll (get the basics in place), lets imagine for a moment that we want to hinder users to type anything but numeric values into a textbox (obviously one would still need to have server side checks in place) 

 
function numeric(e) 
{
    return ((e.keyCode == 8) || (e.keyCode > 47 && e.keyCode <58)); 
}
 

All we need to do from here is attach the function to a textbox, which will prevent the user from entering anything but numeric values. 

 
<input type="text" name="somename" onkeydown="return numeric(event)" />
 

Taking it a bit further, let's say we've got a textarea wherein we want to modify the way it behaves to the tab key - normally pressing the tab key would take us to the next control on the page.

We would however like the user to have a more natural experience and provide them with the ability to use the tab key within a textarea. (Something that would be quite nice in a web application like phpmyadmin)

Have a look at the following code (works in IE and Firefox) 

 
function allowTab(sender, e) 
{
	if (e.keyCode == 9)
	{
		if (e.srcElement)
		{
			sender.selection = document.selection.createRange();
			sender.selection.text = "\t";
		}
		else if (e.target)
		{
			var start = sender.value.substring(0, sender.selectionStart);
			var end = sender.value.substring(sender.selectionEnd, sender.value.length);						
			var newRange = sender.selectionEnd + 1;
			var scrollPos = sender.scrollTop;
			sender.value = String.concat(start, "\t", end);					
			sender.setSelectionRange(newRange, newRange);
			sender.scrollTop = scrollPos;
		}
		return false;
	}
	else
	{
		return true;
	}
}
 

We pass the current object and its event to the function, by attacthing it to the onkeydown event, like below. 

 
<textarea name="somename" style="width:600px; height:600px" onkeydown="return allowTab(this, event)">
</textarea>
 


Posted by - Christoff Truter
Date - 2008-08-20 07:10:18




Comments



Thanks a lot...

Thank you very much for the tab key code. This is the only script that works for me until now. I've tried lots of stupid scripts but no success until this one.

Posted by - Anonymous
Date - 2009-10-21 17:52:22

Excellent

Thanks Bundle of thanks. Great working keep it up.

Posted by - Haider
Date - 2009-08-27 09:04:55

Post comment

Name *
Email
Title
Body *
Security Code
*
* Required fields

Latest Posts

Top 5 posts

Simple WYSIWYG Editor


Creating a WYSIWYG textbox for your website is actually quite simple.
2007-02-01 12:00:00

Moving items between listboxes in ASP.net/PHP example


Move items between two listboxes in ASP.net(C#, VB.NET) and PHP
2008-06-12 17:07:43

Cross Browser Issues: Firefox Word Wrapping


Firefox word wrapping issues
2008-06-09 09:51:21

Populate a TreeView Control C#


Populate a TreeView control in a windows application.
2009-08-27 16:01:03

What time will bring



2007-02-22 12:00:00