Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Capture and cancel textarea keydown event in NS4 and up?

Posted on 2001-07-22
11
Medium Priority
?
1,794 Views
Last Modified: 2007-11-27
I'm trying to restrict the length of textarea input fields in JavaScript. No problem in IE but Netscape is giving me grief - seems to be ignoring the event entirely. I need to cancel the event before it occurs so new text is not added to the textarea. I'd also like to ignore delete key, backspaces and arrow keys (i.e. only captureEvents that actually lengthen the textarea size). This also has to work with the Japanese character set.

so far...

<SCRIPT>
document.campaign_data_form.campaign_desc.captureEvents(Event.KEYDOWN);
document.campaign_data_form.campaign_desc.onkeydown = checkLength(document.campaign_data_form.campaign_desc,'Campaign Description',400);
</SCRIPT>

and...

function checkLength(field,desc,length) {
//used with keydown to limit the length of an input field
     //ignore delete, backspace and arrow keys
     if (!(self.event.keyCode == 8 ||
            self.event.keyCode == 46 ||              
            (self.event.keyCode >= 37 && self.event.keyCode <= 40)              
               )) {
          if (field.value.length >= length) {
               self.event.returnValue = false
               alert (desc + ' cannot be more than ' + length + ' characters ' + self.event.keyCode + ' ' + field.value.length);
               if (field.value.length > length) {
                    field.value = field.value.substr(0,length);
               }
               return false;
          } else {
               return true;
          }
     } else {
          return true;
     }
}

As usual, please post answers as comments so I can choose which answer fits best.
0
Comment
Question by:deal051298
  • 7
  • 4
11 Comments
 
LVL 9

Accepted Solution

by:
nimaig earned 600 total points
ID: 6307307
Try this. It does the same what you want. :

<HTML>
<HEAD>
<SCRIPT>
function checkMaxLength (textarea, evt, maxLength) {
  if (textarea.selected && evt.shiftKey)
    // ignore shift click for select
    return true;
  var allowKey = false;
  if (textarea.selected && textarea.selectedLength > 0)
    allowKey = true;
  else {
    var keyCode =
      document.layers ? evt.which : evt.keyCode;
    if (keyCode < 32 && keyCode != 13)
      allowKey = true;
    else          
      allowKey = textarea.value.length < maxLength;
  }
  textarea.selected = false;
  return allowKey;
}
function storeSelection (field) {
  if (document.all) {
    field.selected = true;
    field.selectedLength =
      field.createTextRange ?
        document.selection.createRange().text.length : 1;
  }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<TEXTAREA NAME="aTextArea" ROWS="2" COLS="10" WRAP="soft"
          ONKEYDOWN="return checkMaxLength(this, event, 5)"
          ONSELECT="storeSelection(this)"
></TEXTAREA>
</FORM>

</BODY>
</HTML>






0
 

Author Comment

by:deal051298
ID: 6307344
Doesn't work in Netscape which is the core problem...
0
 
LVL 9

Expert Comment

by:nimaig
ID: 6307350
which version of Netscape r u using. I am using Netscape 4.7 and it works fine.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:deal051298
ID: 6307364
Netscape Communicator 4.08 which is part of the spec unfortunatly. Thanks.
0
 

Author Comment

by:deal051298
ID: 6307390
OK. I just tried your code as a test using minimal html and it worked in NS4.08.

If you give me a while I'll try and find out what prevents it working for me.
0
 

Author Comment

by:deal051298
ID: 6307432
OK. Here's some Netscape fun... try this in Netscape 4.x :

<html>
<head>
     <title>Untitled</title>
<script>
function checkMaxLength (textarea, evt, maxLength) {
 if (textarea.selected && evt.shiftKey)
   // ignore shift click for select
   return true;
 var allowKey = false;
 if (textarea.selected && textarea.selectedLength > 0)
   allowKey = true;
 else {
   var keyCode =
     document.layers ? evt.which : evt.keyCode;
   if (keyCode < 32 && keyCode != 13)
     allowKey = true;
   else          
     allowKey = textarea.value.length < maxLength;
 }
 textarea.selected = false;
 return allowKey;
}

function storeSelection (field) {
 if (document.all) {
   field.selected = true;
   field.selectedLength =
     field.createTextRange ?
       document.selection.createRange().text.length : 1;
 }
}
</script>
</head>

<body>
<form name="data_form" method=post>
<table width="100">
     <tr>
          <td>
               <textarea name="desc" rows="4" wrap="SOFT" onkeydown="return checkMaxLength(this, event, 10)" onselect="storeSelection(this)"></textarea>
          </td>
     </tr>
</table>
</form>
</body>
</html>

And then make it 100% (not 100) on the <table width="100">
0
 

Author Comment

by:deal051298
ID: 6307461
So doesn't like table width %'s or nested tables for that matter either...
0
 

Author Comment

by:deal051298
ID: 6307485
the worst thing is it's not even kicking off the event at all...
0
 
LVL 9

Expert Comment

by:nimaig
ID: 6307502
Hey ... there seems to be some problem with Netscape ... never noticed it before.
0
 

Author Comment

by:deal051298
ID: 6307573
Netscape's full of these "quirks". For one I'm glad they lost the browser war - they've now pulled their head in and got their act together with standards support, etc. If we were all working with NS4.7x browsers the web would be crap.  Long way to go before they reach IE=level reliability though (not that M$ are that hot)

Your code would work if it wasn't for bad Netscape programmers so the points are yours.

Cheers
0
 
LVL 9

Expert Comment

by:nimaig
ID: 6307597
thanks :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

926 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question