Limit input length in textarea

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • wing

    Limit input length in textarea

    Hi all,

    I find a JavaScript that limits the field length in a textarea, but it
    is not completed.

    The script does not handle the copy and paste case. For example, says
    the textarea field length is limited to 5 and a 6-character length
    text is pasted, no event is triggered. (The script only handles
    onKeyPress and onKeyUp)

    It would be grateful if you could enlighted me on how to capture the
    paste event in a textarea.

    Thanks in advance for any inputs and ideas.

    Wing

    <!-- TWO STEPS TO INSTALL LIMIT TEXTAREA:

    1. Copy the coding into the HEAD of your HTML document
    2. Add the last code into the BODY of your HTML document -->

    <!-- STEP ONE: Paste this code into the HEAD of your HTML document
    -->

    <HEAD>

    <SCRIPT LANGUAGE="JavaS cript">
    <!-- Begin
    function textCounter(fie ld, countfield, maxlimit) {
    if (field.value.le ngth > maxlimit) // if too long...trim it!
    field.value = field.value.sub string(0, maxlimit);
    // otherwise, update 'characters left' counter
    else
    countfield.valu e = maxlimit - field.value.len gth;
    }
    // End -->
    </script>
    </HEAD>

    <!-- STEP TWO: Copy this code into the BODY of your HTML document -->

    <BODY>

    <!-- textCounter() parameters are: text field, the count field, max
    length -->

    <center>
    <form name=myform action="YOUR-SCRIPT.CGI">
    <font size="1" face="arial, helvetica, sans-serif"> ( You may enter up
    to 125 characters. )<br>
    <textarea name=message wrap=physical cols=28 rows=4
    onKeyDown="text Counter(this.fo rm.message,this .form.remLen,12 5);"
    onMouseOut="tex tCounter(this.f orm.message,thi s.form.remLen,1 25);"
    onKeyUp="textCo unter(this.form .message,this.f orm.remLen,125) ;"></textarea>
    <br>
    <input readonly type=text name=remLen size=3 maxlength=3 value="125">
    characters left</font>
    </form>
    </center>


    <!-- Script Size: 1.37 KB -->
  • steve stevo

    #2
    Re: Limit input length in textarea

    Change the event handlers to onChange within the text area.


    "wing" <wingwong@witty .com> wrote in message
    news:873e96d6.0 311030223.7b368 06f@posting.goo gle.com...[color=blue]
    > Hi all,
    >
    > I find a JavaScript that limits the field length in a textarea, but it
    > is not completed.
    >
    > The script does not handle the copy and paste case. For example, says
    > the textarea field length is limited to 5 and a 6-character length
    > text is pasted, no event is triggered. (The script only handles
    > onKeyPress and onKeyUp)
    >
    > It would be grateful if you could enlighted me on how to capture the
    > paste event in a textarea.
    >
    > Thanks in advance for any inputs and ideas.
    >
    > Wing
    >
    > <!-- TWO STEPS TO INSTALL LIMIT TEXTAREA:
    >
    > 1. Copy the coding into the HEAD of your HTML document
    > 2. Add the last code into the BODY of your HTML document -->
    >
    > <!-- STEP ONE: Paste this code into the HEAD of your HTML document
    > -->
    >
    > <HEAD>
    >
    > <SCRIPT LANGUAGE="JavaS cript">
    > <!-- Begin
    > function textCounter(fie ld, countfield, maxlimit) {
    > if (field.value.le ngth > maxlimit) // if too long...trim it!
    > field.value = field.value.sub string(0, maxlimit);
    > // otherwise, update 'characters left' counter
    > else
    > countfield.valu e = maxlimit - field.value.len gth;
    > }
    > // End -->
    > </script>
    > </HEAD>
    >
    > <!-- STEP TWO: Copy this code into the BODY of your HTML document -->
    >
    > <BODY>
    >
    > <!-- textCounter() parameters are: text field, the count field, max
    > length -->
    >
    > <center>
    > <form name=myform action="YOUR-SCRIPT.CGI">
    > <font size="1" face="arial, helvetica, sans-serif"> ( You may enter up
    > to 125 characters. )<br>
    > <textarea name=message wrap=physical cols=28 rows=4
    > onKeyDown="text Counter(this.fo rm.message,this .form.remLen,12 5);"
    > onMouseOut="tex tCounter(this.f orm.message,thi s.form.remLen,1 25);"
    > onKeyUp="textCo unter(this.form .message,this.f orm.remLen,125) ;"></textarea>
    > <br>
    > <input readonly type=text name=remLen size=3 maxlength=3 value="125">
    > characters left</font>
    > </form>
    > </center>
    >
    >
    > <!-- Script Size: 1.37 KB -->[/color]


    Comment

    • wing

      #3
      Re: Limit input length in textarea

      Hi Steve,

      Thanks for your comments,

      I have tried the onChange event handler and found the followings
      issues.
      1. the event is not called in the mouse paste action.
      2. sometimes the event is not called when I click the mouse outside of
      the textarea.

      Am I missing something here?

      I think the primary goal to capture the mouse paste action. Is this
      possible with JavaScript?

      Cheers,

      Wing

      Comment

      • wing

        #4
        Re: Limit input length in textarea

        Dear all,

        Is there another way to limit the size text of a textarea?

        Just some brain storming ideas for discussion.
        - using java applet
        - using flash

        Thanks in advance for your inputs and ideas.

        Wing


        wingwong@witty. com (wing) wrote in message news:<873e96d6. 0311040132.2729 e2c@posting.goo gle.com>...[color=blue]
        > Hi Steve,
        >
        > Thanks for your comments,
        >
        > I have tried the onChange event handler and found the followings
        > issues.
        > 1. the event is not called in the mouse paste action.
        > 2. sometimes the event is not called when I click the mouse outside of
        > the textarea.
        >
        > Am I missing something here?
        >
        > I think the primary goal to capture the mouse paste action. Is this
        > possible with JavaScript?
        >
        > Cheers,
        >
        > Wing[/color]

        Comment

        • danjam
          New Member
          • Jun 2006
          • 7

          #5
          Modular, customizable Text-Counter

          Here's a script that'll do the job for you, including copy-paste issues:



          Hope this helps...

          Comment

          Working...