SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    belfast
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Limit Text Entry

    Hi Guys,

    Having a bit of bother with some javascript to limit/count the amount of characters left in an input textarea.

    Heres my site code:
    HTML Code:
    <form enctype="multipart/form-data" action="comingSoon" method="post">
      <div class="row">
       <h2>Units</h2>
         <span class="label">Coming Soon: (255 chars max)</span>
         <span class="formw"><textarea  class="textarea" type="text" name="unitsComingSoon"><?php echo("$unitsText") ?></textarea></span></div>
    	<div class="row">
    	  <h2>theSpecialist</h2>
    		<span class="label">Coming Soon: (255 chars max)</span>
    		<span class="formw"><textarea  class="textarea" type="text" name="theSpecialistsComingSoon"><?php echo("$theSpecialistsText") ?></textarea></span></div>
    I tried modifying the original code I found below but now joy ... think its the DOM I'm having trouble with??

    HTML Code:
    // original code I found at http://www.plus2net.com/javascript_tutorial/textarea-counter.php
    <script language=JavaScript>
    <!--
    function check_length(my_form)
    {
    maxLen = 50; // max number of characters allowed
    if (my_form.my_text.value.length >= maxLen) {
    // Alert message if maximum limit is reached.
    // If required Alert can be removed.
    var msg = "You have reached your maximum limit of characters allowed";
    alert(msg);
    // Reached the Maximum length so trim the textarea
    my_form.my_text.value = my_form.my_text.value.substring(0, maxLen);
    }
    else{ // Maximum length not reached so update the value of my_text counter
    my_form.text_num.value = maxLen - my_form.my_text.value.length;}
    }
    //-->
    </script>
    
    </head>
    
    <body>
    <form name=my_form method=post>
    <textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); name=my_text rows=4 cols=30></textarea>
    <br>
    <input size=1 value=50 name=text_num> Characters Left
    </form>
    Any help appreciated,

    Ronan

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check your HTML, you are forgetting to use quotes...

  3. #3
    SitePοint Troll disgracian's Avatar
    Join Date
    Aug 2006
    Location
    Samsara
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd just use the onkeyup="check_length(this.form);" event instead.
    Code:
    function check_length(f){
       var maxLength=50;
       var textArea=f.my_text,counter=f.text_num;
       var remaining=maxLength-textArea.textLength;
       counter.value=remaining;
       if(remaining<0){
          alert("You have reached your maximum limit of characters allowed!");
          textArea.value=textArea.value.substr(0,50);
       }
    }
    Cheers,
    D.

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Might be more efficient if you use the variable "maxLength" when needed:
    Code:
    function check_length(f){
       var maxLength=50;
       var textArea=f.my_text,counter=f.text_num;
       var remaining=maxLength-textArea.textLength;
       counter.value=remaining;
       if(remaining<0){
          alert("You have reached your maximum limit of characters allowed!");
          textArea.value=textArea.value.substr(0,50);
       }
    }
    Mike - Side project: Live Journal (blogging site).

  5. #5
    SitePοint Troll disgracian's Avatar
    Join Date
    Aug 2006
    Location
    Samsara
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easier to work with, yes, but efficient? How many CPU cycles do you think are at stake here? :-)

    Cheers,
    D.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •