[thelist] Re:TIP: Limiting TextArea length

James Aylard evolt at pixelwright.com
Thu Mar 18 12:47:45 CST 2004


John.Brooking at sappi.com wrote:

>> From: "James Aylard" <evolt at pixelwright.com>
>>
>>    For clarification, you don't need to check the clipboard. The
>> onpaste event fires when the paste occurs, allowing you to check the
>> length of the textarea value and truncate it if it exceeds the
>> allowed limit.
>
>    Not to pick nits, but what exactly does "when" mean, in the
> sentence "the event fires *when* the paste occurs" -- before, after,
> or simultaneous to the paste? My impression, which seems supported by
> the testing I did in IE 6, is that the event occurs at the point
> where the system is just about to put the characters into the field,
> but hasn't yet. Checking the length at that point and returning
> false, if necessary, prevents the system from continuing with the
> paste at all, which is just what I intended. Maybe that is not the
> same as someone else would intend, to which your next point speaks.

    As to when the onpaste event fires, Microsoft says that it "Fires on the
target object when the user pastes data, transferring the data from the
system clipboard to the document." [1] Which, of course, clarifies nothing,
really. But I agree that, in point of fact, it appears to fire at the
nanosecond that the paste operation begins, which is presumably a nanosecond
or two before the pasted material arrives at its target.

>>     When I worked with this a couple of years ago, I found problems
>> with checking the textarea value immediately, and so I put in a 10ms
>> setTimeout before validating the length of the entry -- effectively
>> creating an onafterpaste event.
>
>    So it sounds like your setTimeout allowed the onPaste to continue
> putting the text in, then by the time the timer went off, the onPaste
> event had finished and the text was inserted, so you examined it and
> truncated as necessary. That works too. But I think (haven't tested)
> I could do the same thing without the setTimeout by examining the
> clipboard and truncating its extra characters before allowing the
> paste to continue. Same net, judgement call as to which is preferable.

    I agree that this is a cleaner approach (IE-proprietary, covering paste
operations only):

<html>
<head>
 <title>Textarea Maxlength</title>
 <script type="text/javascript">
  function fnPaste(vEl)
  {
   var intMaxLength, intCurrLength, strClip ;
   var intClipLength, intAvailLength ;
   var blnReturn ;

   blnReturn = true ;
   intMaxLength = vEl.getAttribute("maxlength") ;
   intCurrLength = vEl.value.length ;
   strClip = window.clipboardData.getData("Text") ;
   intClipLength = strClip.length ;
   intAvailLength = intMaxLength - intCurrLength ;

   if (intAvailLength > 0)
   {
    if (intAvailLength < intClipLength)
    {
     strClip = strClip.substr(0, intAvailLength) ;
     window.clipboardData.setData("Text",strClip) ;
    }
   }
   else
   {
    blnReturn = false ;
   }
   return blnReturn ;
  }
 </script>
</head>
<body>
 <textarea id="txaData"
   onpaste="return fnPaste(this);"
   maxlength="50"></textarea>
</body>
</html>

>    As the Perl mongers say -- TMTOWTDI: There's More Than One Way To
> Do It.

    Yup.

1.
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onpaste.asp
2.
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/getdata.asp

James Aylard



More information about the thelist mailing list