SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Limit characters in textarea for double byte

    Hi,
    I'm new at Javascript and have been looking for a way to limit double byte characters (such as Kanji) in a textarea in IE and Firefox. Does anyone know a way to do that? The scripts I have tried look like they work for double byte, but if you keep typing after it reaches the limit, it will then delete most of what you've entered instead of only deleting the excess number of characters. Any help would be greatly appreciated.

    Thanks,
    zeej

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post one of the scripts you have tried? Maybe some adjustment is all that's in order.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jimmy,
    Here's the last one I tried - I got this off the Internet.

    <script language="javascript" type="text/javascript">
    var TextCounter = Class.create();
    TextCounter.prototype = {
    initialize: function(textareaid, inputid, maxLength) {
    this.maxLength = maxLength;
    this.textarea = $(textareaid);
    this.input = $(inputid);
    this.input.value = maxLength;
    this.input.readonly = true;
    this.input.disabled = true;
    Event.observe(this.textarea, 'keyup', this.checkChars.bindAsEventListener(this));
    Event.observe(this.textarea, 'keydown', this.checkChars.bindAsEventListener(this));
    this.checkChars();
    },
    checkChars: function(e) {
    var includeBreaksInCount = false; // false = don't count a return (\r or \n) in the count.
    var charCount = this.textarea.value.length;
    var breaks = 0;
    if (!includeBreaksInCount) {
    var lines = this.textarea.value.split('\n');
    breaks = lines.length;
    // check for /r at the end of the lines (IE)
    for (var i=0; i<lines.length; i++) {
    var line = lines[ i ];
    if (line.charCodeAt(line.length-1) == 13)
    breaks++;
    }

    }

    // check if over limit
    if ((charCount-breaks) > this.maxLength) {
    this.textarea.value = this.textarea.value.substring(0, (this.maxLength + breaks) );
    }

    // update counter
    if (this.input) {
    if ((charCount-breaks) > this.maxLength) {
    this.input.value = 0;
    } else {
    this.input.value = (this.maxLength + breaks) - charCount;
    }
    }
    }
    }
    </script>

    <form>
    <textarea id="textarea1" rows="5" cols="57"></textarea>
    <br />
    <input type="text" id="remaining" size="9" /> characters remaining
    </form>
    <script type="text/javascript">
    var t1 = new TextCounter('textarea1', 'remaining', 150);
    </script>

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like that script over-complicates the process.

    Try this: (put directly above </body>)

    Code JavaScript:
    <script type="text/javascript">
    TextAreaLimit('textarea1',2000,'remaining');
    function TextAreaLimit(TextAreaID,limit,FeedbackBoxID) {
    var TextArea = document.getElementById(TextAreaID);
    if(FeedbackBoxID) var Reciever = document.getElementById(FeedbackBoxID);
    TextArea.onkeyup = function() {
    if(TextArea.value.length >= limit) {
    TextArea.value = TextArea.value.substr(0, limit);
    }
    Reciever.value = limit - TextArea.value.length;
    if(limit - TextArea.value.length == 0) Reciever.style.color = "red";
    }
    }
    </script>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't want to include returns in the count then use this:

    Code JavaScript:
    <script type="text/javascript">
    TextAreaLimit('textarea1',2000,'remaining');
    function TextAreaLimit(TextAreaID,limit,FeedbackBoxID) {
     var TextArea = document.getElementById(TextAreaID);
     if(FeedbackBoxID) var Reciever = document.getElementById(FeedbackBoxID);
     TextArea.onkeyup = function() {
      var lines = TextArea.value.split('\n');
      var breaks = lines.length-1;
      var DoNotCount = breaks*2;
      if(TextArea.value.length-DoNotCount >= limit) {
       TextArea.value = TextArea.value.substr(0, limit);
      }
      Reciever.value = limit - (TextArea.value.length-DoNotCount);
      if(limit - (TextArea.value.length-DoNotCount) == 0) Reciever.style.color = "red";
     }
    }
    </script>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jimmy,
    Thank you for the help with this. I can't get it to work, but I think it's because I'm so new to Javascript - I don't know what I'm doing yet. Here's how I tried it which, obviously, is wrong. If you don't have time to continue on this, I understand. I appreciate all your help.

    <script type="text/javascript">
    TextAreaLimit('TextAreaID',15,'remaining');
    function TextAreaLimit(TextAreaID,limit,FeedbackBoxID) {
    var TextArea = document.getElementById(TextAreaID);
    if(FeedbackBoxID) var Reciever = document.getElementById(FeedbackBoxID);
    TextArea.onkeyup = function() {
    if(TextArea.value.length >= limit) {
    TextArea.value = TextArea.value.substr(0, limit);
    }
    Reciever.value = limit - TextArea.value.length;
    if(limit - TextArea.value.length == 0) Reciever.style.color = "red";
    }
    }
    </script>

    <form>
    <textarea id="TextAreaID" rows="5" cols="57"></textarea>
    <br />
    <input type="text" id="FeedbackBoxID" size="9" /> characters remaining
    </form>
    <script type="text/javascript">
    Reciever('TextAreaID', 'remaining', 15);
    </script>

    zeej

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should put the script under the form elements so that it only begins once the referenced elements have been loaded.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that. It now works in Firefox for English and Japanese and it works in IE for English, but for Japanese, it cuts off more characters than the set limit if I keep typing. That's the problem I've run into every time. I may just go with it as is for now. The users can watch the countdown to help determine how much is left.

    Thanks so much for your efforts!!

    zeej


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
  •