Only allow enter key in MultiLine textbox

13 Jan 2006 4:35 PM

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

13 Jan 2006 5:04 PM

Randy Webb

ian said the following in news:comp.lang.javascript 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:

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)

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)

Show quoteHide quote

>         {
>             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?

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>

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

13 Jan 2006 5:18 PM

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[i].type == "TEXT")
inputs[i].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[i].name] || inputs[i].type!="text")
continue;
addKeyEvent(inputs[i]);
}
i = textareas.length;
while(i-->0)
{
if(ignoredFields[textareas[i].name)
continue;
addKeyEvent(textareas[i]);
}
}

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.

13 Jan 2006 5:29 PM

Flinky Wisty Pomm

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

13 Jan 2006 8:20 PM

Randy Webb

Flinky Wisty Pomm said the following on 1/13/2006 12:18 PM:

> Why not use an init function instead?

<snip>

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

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

13 Jan 2006 8:30 PM

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"></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.

Show quoteHide quote

"ian" <iscriv***@hotmail.com> wrote in message
news:1137170132.553431.6100@g47g2000cwa.googlegroups.com...
> 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
>