Only allow enter key in MultiLine textbox

I

ian

Hi,

I am currently using a Javascript function to dissallow the enter key
on my ASP.NET (2.0) web page, as follows:

function fnTrapKP(){
if (document.all)
{
if (event.keyCode == 13)
{
event.returnValue=false;
event.cancelBubble = true;
}
}
}

I call this from the body of my master page as follows:

<body onkeypress="fnTrapKP();">

On one of my pages I have a multiline textbox. The function above now
stops a user from untering multiple lines of text in to this textbox.

Is there any way I can modify the function to only allow the enter key
to be allowed when my multiline textbox has the focus?

Thanks

Ian
 
R

Randy Webb

ian said the following in on 1/13/2006 at
11:35 AM:
Hi,

I am currently using a Javascript function to dissallow the enter key
on my ASP.NET (2.0) web page, as follows:
Click to expand...

Let's be frank, up front. You are not disallowing it, you are attempting
to disallow it.
function fnTrapKP(){
if (document.all)
{
if (event.keyCode == 13)
Click to expand...

If you use feature detection (the if(document.all) statement) then
feature detect for what you want to use.

if (event && event.keyCode && event.keyCode == 13)

{
event.returnValue=false;
event.cancelBubble = true;
}
}
}

I call this from the body of my master page as follows:

<body onkeypress="fnTrapKP();">

On one of my pages I have a multiline textbox. The function above now
stops a user from untering multiple lines of text in to this textbox.

Is there any way I can modify the function to only allow the enter key
to be allowed when my multiline textbox has the focus?
Click to expand...

var isBlurred = true;
function fnTrapKP(){
if (event && event.keyCode && (event.keyCode==13) && isBlurred)
{return false;}
return true;
}

<body onkeypress="return fnTrapKP();">
<textarea>Enter not allowed</textarea>
<textarea onfocus="isBlurred=false;" onblur="isBlurred=true;">Enter
allowed</textarea>
 
F

Flinky Wisty Pomm

Why not use an init function instead?

do something like:

function initKeyEvent()
{
var inputs = document.getElementsByTagName("input");
var i = inputs.length;
while(i-->0)
{
if(inputs.type == "TEXT")
inputs.onkeypress = fnTrapKP;
}
}

that'll only pick up <input type="text" /> tags and not <textarea>
tags.

If you only want that textarea to be ignored, but pick up all the
others then try something like
<code>
// holds names or Ids or references to fields which are NOT to have the
event handler assigned.
// choose whichever identifier works best for you. I've stuck with name
'cos it's simple like me.
var ignoredFields = [];

function initKeyEvent()
{
var inputs = document.getElementsByTagName("INPUT");
var textareas = document.getElementsByTagName("TEXTAREA");
var i = inputs.length;
while(i-->0)
{
// note the triple ===; not a typo.
if(ignoredFields[inputs.name] || inputs.type!="text")
continue;
addKeyEvent(inputs);
}
i = textareas.length;
while(i-->0)
{
if(ignoredFields[textareas.name)
continue;
addKeyEvent(textareas);
}
}

function addKeyEvent(element)
{
element.onkeypress = fnTrapKP;
}

function ignoreField(fieldName)
{
ignoredFields[fieldName] = true;
}

</code>

now, at the bottom of the page with the multiline textbox use

<script>
ignoreField("myTextboxName");
</script>


That's all typed off the top of my head, so I apologise in advance for
fatal flaws, obvious typos, exploding monitors etc.
 
F

Flinky Wisty Pomm

and the immediate fatal flaw is the "triple ===" comment where I was
using if(undefined===ignoredFields[someKey])
 
R

Randy Webb

Flinky Wisty Pomm said the following on 1/13/2006 12:18 PM:
Why not use an init function instead?
Click to expand...

<snip>

That looks like a whole lot of work to do what I did in a few lines :)
 
K

Kevin Spencer

Hi ian,

First, you will need to determine whether or not the textarea has the focus.
To do this, you need to create a variable to indicate whether or not it has
the focus, add an event handler for the "onfocus" event, and add an event
handler for the "onblur" event. Example:

<body onkeypress="KeyCheck(event)">

<script type="text/javascript"><!--
var textHasFocus = false;

function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if (!textHasFocus && KeyID == 13)
{
event.returnValue=false;
event.cancelBubble = true;
}
}
// --></script>
<form>
<textarea rows="2" name="S1" cols="20" onfocus="textHasFocus=true"
onblur="textHasFocus=false"></textarea>
<input type="submit" value="Submit" name="B1">
</form>
</body>

Note that I also changed your function a bit, so that it will work in all
browsers (at least Mozilla and IE). In IE, there is a window.event object,
but not in Mozilla. In Mozilla, the event is passed to the event handler
from the object that raised it. So, the function handles the event according
to the browser it is run on.

What's going on here, is that the onfocus event happens when the cursor is
placed inside the textarea. The event handler sets the "textHasFocus"
variable to true. When the user tabs out of the textarea, or clicks
somewhere else, or types outside the textarea, the "onblur" event sets the
"textHasFocus" variable to false. The "KeyCheck" function checks the value
of this variable, and only disallows the ENTER key when it is false.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but it takes a very long time,
and the bicycle has to *want* to change.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Toggle enter key 2
Enter behaviour on textbox 2
Data from multi-line textbox is incomplete when Enter key is pressed 3
enter key in textbox 4
trap enter key 0
ENTER key in TextBox in ASP.NET 2.0 4
How to prevent the enter key causing a form postback .net 1.1 7
Master page Enter key as Sumbit 1

Members online

No members online now.
Total: 48 (members: 0, guests: 48)
Robots: 439

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top