Solved

Capture and cancel textarea keydown event in NS4 and up?

Posted on 2001-07-22
11
1,787 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
[X]
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
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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

615 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