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
Post comment