Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Capture and cancel textarea keydown event in NS4 and up?

Posted on 2001-07-22
11
1,780 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 150 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

840 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