raterus
asked on
Catch Tab & Enter keystroke in an input.
Hi,
I'm having the hardest time with this, I know there are plenty of examples to do this, but I can't seem to get it working.
I have a page that shows a grid of input textboxes. When someone hits tab OR enter in these boxes, I want to fire a function. I'm having trouble finding a cross-browser way to determine what keystroke they pressed. Does someone have a quick function that will catch a keypress in a input box, and depending on if they hit a tab or enter, run some code. I need this to work, at the very least, in IE and Firefox.
Thanks,
--MIchael
I'm having the hardest time with this, I know there are plenty of examples to do this, but I can't seem to get it working.
I have a page that shows a grid of input textboxes. When someone hits tab OR enter in these boxes, I want to fire a function. I'm having trouble finding a cross-browser way to determine what keystroke they pressed. Does someone have a quick function that will catch a keypress in a input box, and depending on if they hit a tab or enter, run some code. I need this to work, at the very least, in IE and Firefox.
Thanks,
--MIchael
ASKER
hi pravinasar,
I don't need to disable tab & enter for every field, just certain ones. I was hoping for a method that would allow me to attach an event handler like so
<input type="text" onkeypress='catchtabenter( "somedataI need");' />
I don't need to disable tab & enter for every field, just certain ones. I was hoping for a method that would allow me to attach an event handler like so
<input type="text" onkeypress='catchtabenter(
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, here's what I ended up using, it works great between both browsers
<script language="javascript">
var nextID = null;
function kH(e) {
var code;
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if((code==13)||(code==9))
{
document.getElementById(ne xtID).focu s();
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}else{
return true;
}
}
function catchtabenter (evt, cNextID) {
nextID = cNextID;
return kH(evt);
}
</script>
<input type="text" name="text1" onkeydown='return catchtabenter(event, "somedataIneed");' />
<script language="javascript">
var nextID = null;
function kH(e) {
var code;
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if((code==13)||(code==9))
{
document.getElementById(ne
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}else{
return true;
}
}
function catchtabenter (evt, cNextID) {
nextID = cNextID;
return kH(evt);
}
</script>
<input type="text" name="text1" onkeydown='return catchtabenter(event, "somedataIneed");' />
This is a cross browser solution, try it yourself. You can plug in appropriate action (doAction()...)
<html>
<head>
<title>Disable Enter and Text </title>
<script language="javascript">
function BrowserType () {
var srchText = navigator.userAgent;
var brwTypes = ("Opera,MSIE,Netscape,Fire
for (var ix=0; ix < brwTypes.length; ix++) {
if (srchText.toString().match
return brwTypes[ix];
}
}
return null;
}
var brwType = BrowserType();
function doAction (evt) {
return false;
if (evt) {
evt.returnValue = false;
evt.cancelBubble = true;
}
else {
alert ('Bad Event Object');
}
}
function kH(e) {
evt = (e) ? e : window.event;
var type = evt.type;
var pK = e ? e.which : window.event.keyCode;
if (pK == 9) { pK = 13; evt.keyCode = 13; }
if (pK == 13) {
doAction (evt);
return false;
}
if (pK == 9 || pK == 0) {
doAction (evt);
return false;
}
}
function DisableEnterAndTab ()
{
if (!brwType) { return; }
if (brwType == 'MSIE') {
document.onkeypress = kH;
document.onkeydown = kH;
}
else if (brwType == 'Firefox') {
document.onkeypress = kH;
}
else if (brwType == 'Netscape') {
document.onkeypress = kH;
if (document.captureEvents) {
document.captureEvents (Event.KEYPRESS);
}
}
else {
alert ('UnSupported Browswer');
}
}
DisableEnterAndTab();
</script>
</head>
<body>
<form name="MyForm" onSubmit="alert('No you did not disable them'); return;">
<br>
<input type="text" name="t1" value="">
<br>
<input type="text" name="t2" value="">
<br>
<input name="TheText">
<br>
<input type="submit">
</form>
</body>
</html>