zoukankan      html  css  js  c++  java

  • set Maxlength to TextArea

    http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20781420.html

    Hi
    I am using Textarea type.I want to set maximum length to the textarea.
    I am using following code for the same,but it is not working,
    <textarea name="txtDescription" cols=10 rows=3 maxlength=50></textarea>
    But it is not working,it takes chars beyond 50 also.
    Help me inthe same
    Comment from seanpowell
    Date: 10/29/2003 02:14AM PST
    		 Comment

    Hi, you're best bet is to set this in a basic javscript function, like so:

    <html>
    <head>
    <title>Category</title>
    <script language="javascript" type="text/javascript">
    <!--
    function validate() {
         maxlength=50;
         if(document.myForm.theTextArea.value.length>=maxlength) {
              alert('Your comments must be 50 characters or less');
              document.myForm.theTextArea.focus();
              return false;
         } else {
              return true;
         }
    }
    //-->
    </script>
    </head>
    <body>
    <form name="myForm" onsubmit="return validate();">
    Comments:<br />
    <textarea name="theTextArea" cols="10" rows="3"></textarea><br />
    <input type="submit">
    </form>
    </body>
    </html>


    How to Customize
    ============

    Make sure that you change the following 2 values to suit your page, both in the javascript, and the form:

    1. myForm
    2. theTextArea

    If the name of your form is hello and the name of your text area is goodbye, then the code above would be:

    function validate() {
         maxlength=50;
         if(document.hello.goodbye.value.length>=maxlength) {
              alert('Your comments must be 50 characters or less');
              document.hello.goodbye.focus();
              return false;
         } else {
              return true;
         }
    }

    and

    <form name="hello" onsubmit="return validate();">
    Comments:<br />
    <textarea name="goodbye" cols="10" rows="3"></textarea><br />
    <input type="submit">
    </form>

    Thanks

    Comment from chitramahadik
    Date: 10/29/2003 02:21AM PST
    		 Author Comment

    Hi,I knew it can work instead if I called the same javascript function onChange event of TExtarea ,it will work but I can't specify maxlength=50 to TextArea object,the same is working for Text object.

    Comment from seanpowell
    Date: 10/29/2003 02:27AM PST
    		 Comment

    That's because the textarea object does not use the "maxlength" property. It only supports the attributes: columns, rows, and name.

    Accepted Answer from DelTreme
    Date: 10/30/2003 02:24AM PST
    Grade: B
    		 Accepted Answer

    I've got a script to add the MaxLength property to the TEXTAREA tag (I didn't write it, found it somewhere on the net):

    You'll need a file, called     maxlength.htc (code below)    wich adds a behaviour to the TextArea tag.

    In your stylesheet, add:

    TEXTAREA { behavior: url(maxlength.htc);}

    From that point on, you can use
    <TEXTAREA MAXLENGTH=50></TEXTAREA>
    Whereever you want.

    ---code for maxlength.htc---
    <PUBLIC:COMPONENT id="bhvMaxlength" urn="maf:Maxlength">
         <PUBLIC:PROPERTY name="maxLength" />
         <PUBLIC:ATTACH event="onkeypress" handler="doKeypress" />
         <PUBLIC:ATTACH event="onbeforepaste" handler="doBeforePaste" />
         <PUBLIC:ATTACH event="onpaste" handler="doPaste" />

    <SCRIPT language="JScript">
    // Keep user from entering more than maxLength characters
    function doKeypress(){
         if(maxLength && value.length > maxLength-1){
              event.returnValue = false;
              maxLength = parseInt(maxLength);
         }
    }
    // Cancel default behavior
    function doBeforePaste(){
         if(maxLength)
              event.returnValue = false;
    }
    // Cancel default behavior and create a new paste routine
    function doPaste(){
         if(maxLength){
              event.returnValue = false;
              maxLength = parseInt(maxLength);
              var oTR = element.document.selection.createRange();
              var iInsertLength = maxLength - value.length + oTR.text.length;
              var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
              oTR.text = sData;
         }
    }
    </SCRIPT>

    </PUBLIC:COMPONENT>

    Comment from kingromes
    Date: 06/07/2004 01:06PM PDT
    		 Comment

    I assume that is an IE-only solution (Tested in Mozilla Firefox).

    Neat trick tho'

    Comment from nishaj
    Date: 07/13/2004 11:41AM PDT
    		 Comment

    I could not make this work using IE6/javascript. Maybe I am doing something wrong.

    Added the line to the css as above to add the behavior to TEXTAREA.

    Added the htc file with the code from above - just changed the SCRIPT LANGUAGE = Javascript.

    Used the input tag as <TEXTAREA MAXLENGTH=5> as a test.

    It just doesn't do anything.


    Comment from gfdos
    Date: 09/03/2004 10:33AM PDT
    		 Comment

    I found this on the net, and it seems to fix the problems described herein:

    <script language="jscript">
    function LimitMultiLineLength(obj)
    {
     var iKey;
    var eAny_Event = window.event;
    iKey = eAny_Event.keyCode;
    var re
    re = new RegExp("\r\n","g")  
    x = obj.value.replace(re,"").length ;
    if ((x >= obj.maxLength) && ((iKey > 33 && iKey < 255) || (iKey > 95 && iKey < 106)) && (iKey != 13))
    {
    if (obj.ErrorMessage )
    {
    alert(obj.ErrorMessage);
    }
    window.event.returnValue=false;      
    }
    }
    </script>

    called like this:

    <textarea name="name" id="name" onkeypress="LimitMultiLineLength(this)" onbeforepaste="LimitMultiLineLength(this)" maxLength="255" ErrorMessage="The maximum allowance of 255 characters has been reached." style="height:108px;400px;"></textarea>

    Comment from bharatpanthee
    Date: 12/16/2004 03:02AM PST
    		 Comment

    there is no property like maxlengh in textarea u can use javascript for check this
    code for this
    <script language="javascript">
    var text1;
    function checklength(i)
    {
    var txt;
    txt=document.form.textarea1.value;
    n=txt.length;
    if (n>i) //i is the maxlength of textarea which we have set to 80
    {
    alert('Text overflow');
    document.form.textarea1.value=text1;
    return;
    }
    text1=document.form.textarea1.value;
    }
    </script>

    <body>
    <form>
    <textarea name=textarea1 onkeydown="javascript:checklength(80)"></textarea>

    </form>
    </body>


    I think this will help u.

    Comment from biffsmith
    Date: 03/04/2005 06:00AM PST
    		 Comment

    The validate() works like a charm.  Thank you!  Now what if the form contains more than one textarea? I attempted to add additional variables to the script but I'm certain I have the syntax wrong:

    <script language="javascript" type="text/javascript">
    <!--
    function validate() {
         maxlength=200;
         if(document.form.comments1.value.length>=maxlength) {
              alert('Your comments must be 200 characters or less');
              document.form.comments1.focus();
              return false;
         } else {
              return true;
         }
    }
    function validate1() {
         maxlength=200;
         if(document.form.comments2.value.length>=maxlength) {
              alert('Your comments must be 200 characters or less');
              document.form.comments2.focus();
              return false;
         } else {
              return true;
         }
    }
    function validate2() {
         maxlength=200;
         if(document.form.comments3.value.length>=maxlength) {
              alert('Your comments must be 200 characters or less');
              document.form.comments3.focus();
              return false;
         } else {
              return true;
         }
    }
    //-->
    </script>

    AND THEN IN THE FORM TAG, I CALLED IT AS SUCH:

    onsubmit="return validate(); return validate1(); return validate2()"

    Since it doesn't work I'm sure I've got it wrong.  Can you take it one step further and advise as to the correct syntax?  Will this even work with more than one textarea field?

    Thank you!

    Administrative Comment from seanpowell
    Date: 03/04/2005 06:07AM PST
    		 Administrative Comment

    Hi biffsmith,

    You'll need to cerate a new question for this.

    Thanks,
    Sean Powell
    HTML PAge Editor

    Comment from presbria
    Date: 08/10/2005 01:21PM PDT
    		 Comment

    Hey, I know this one's already solved, but I have an alternative solution that I feel is better for a few reasons.  

    #1 It's re-usable for all text areas via one function
    #2 It doesn't inform teh user that he/she is typing too many characters, it prevents them from doing so, sort of like maxlength

    There's a downside: the user can see the typed character for an instand prior to the removal.

    Here's the function:

    function CheckMaxLength(Object, MaxLen)
    {
      if(Object.value.length > MaxLen)
      {     
        Object.value = Object.value.substring(0, MaxLen);
      }
    }

    And the implementation:
    <textarea name="Responsibilities" onkeyup="CheckMaxLength(this, 15);"><textarea>


    Passing the form object and using it's methods.  Pretty simply and painless.


     

    Comment from presbria
    Date: 08/10/2005 01:22PM PDT
    		 Comment

    Oh, that answered both questions too!!!

    I know, I'm too late, but I think it's still the best way to do it, if not, please let me know a better one.

    Thx.

    Comment from mdmeighan
    Date: 08/22/2005 01:10PM PDT
    		 Comment

    This is a little cleaner - it imposes the length limit by cancelling the extra keypresses rather than using the substring() trick --

    function imposeMaxLength(Object, MaxLen)
    {
      return (Object.value.length <= MaxLen);
    }

    Implementation:


    <textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ><textarea>
  • 相关阅读:
    数据库迁移到Amazon RDS 的问题
    排序算法之希尔排序
    第一个 Shell脚本
    排序算法之直接插入排序
    当前工作参考
    cerr
    阿里云典型应用案例
    云服务引擎ACE
    阿里云SLB
    指针使用注意事项
  • 原文地址：https://www.cnblogs.com/cy163/p/257458.html
Copyright © 2011-2022 走看看