Limit textarea length

Discussion in 'Javascript' started by Jesper Rønn-Jensen, Jan 26, 2005.

  1. I have a textarea that must be limited to 70 characters. No big deal --
    at least so I thought.
    * Textarea must not exceed 70 characters
    * Exceeding content must be cut off
    * Must work on input by keyboard (keypress, keyup events)
    * Must work on pasted input from context menu
    * Must work on pasted input via CTRL+V and similar
    * Must work on pasted input via browsers menu>Edit>Paste
    * Must work in Mozilla + IE and coded via W3C standards

    I found quite some discussions here in comp.lang.javascript on this
    subject, but all lack the discussion of non-keyboard inputs.

    So far, I concluded to avoid using the onkeyup or onkeypress events -
    they do not capture when data pasted via the mouse.

    This is what I do now, but there are still problems.
    * Textarea onfocus() adds a window.setInterval eventlistener to check
    the textarea value 10 times per second.
    * If textarea.value exceeds 70 characters, set textarea.value to
    substring(0,69)
    * Textarea onblur() removes eventlistener via window.clearInterval

    This works when I paste text in all ways and when I enter data by
    keyboard from one end to the other. BUT as soon as I add text at the
    beginning of the textarea, then the end text is cut off and cursor is
    moved to the end of textarea.

    My idea would work OK if I could figure out a way to move cursor back
    to its position when I finish cropping textarea text. As you might see,
    I'm a bit stuck here.
    Any suggestions appreciated,

    Thanks in advance,

    Jesper
     
    Jesper Rønn-Jensen, Jan 26, 2005
    #1
    1. Advertising

  2. Jesper Rønn-Jensen

    McKirahan Guest

    "Jesper Rønn-Jensen" <> wrote in message
    news:...
    > I have a textarea that must be limited to 70 characters. No big deal --
    > at least so I thought.


    [snip]

    Why not just use a "text" field?

    <input type="text" name="data" size="70" maxlength="70">

    You can also set "size=" to somerthing else if it doesn't fit on your page.
     
    McKirahan, Jan 26, 2005
    #2
    1. Advertising

  3. Thanks for your quick reply.
    >Why not just use a "text" field?


    Text field is a no-go because I cannot input line breaks. Sorry, that
    would have been easy. I must use a textarea.
     
    Jesper Rønn-Jensen, Jan 26, 2005
    #3
  4. Jesper Rønn-Jensen

    RobG Guest

    Jesper Rønn-Jensen wrote:
    > Thanks for your quick reply.
    >
    >>Why not just use a "text" field?

    >
    >
    > Text field is a no-go because I cannot input line breaks. Sorry, that
    > would have been easy. I must use a textarea.
    >


    Most people would not include line breaks in their character
    count (if they actually try to count the characters at all).

    Why not have your event listener write the current number of
    characters to a place in the page next to the text area. When
    it exceeds 70 characters, make it red and bold. If the user
    submits the form with too many characters, give them an error
    message and send them back to fix it.

    Attempting to automate character removal will likely just bind
    you in ever more complex "what if..." scenarios. And randomly
    removing characters from the end of the supplied text to make it
    only 70 characters will likely frustrate users - what if the bit
    you programmatically trimmed was something they wanted kept, and
    some other part trimmed?

    The only way they'll know they've hit the magic number is if
    they notice characters disappearing from the end of the text.

    It's like when you type an incorrect URL into the browser
    address bar. Having advised you of the error, the browser
    should leave the incorrect text there and let you fix it,
    rather than display the URL of the error page (as some browsers
    still do).

    Users aren't dumb. Give them appropriate information and a
    helpful (not interventionist) interface and they'll respond much
    better.

    --
    Rob
     
    RobG, Jan 27, 2005
    #4
  5. Jesper Rønn-Jensen <> wrote in message
    news:...
    > I have a textarea that must be limited to 70 characters. No big deal --
    > at least so I thought.
    > * Textarea must not exceed 70 characters
    > * Exceeding content must be cut off
    > * Must work on input by keyboard (keypress, keyup events)
    > * Must work on pasted input from context menu
    > * Must work on pasted input via CTRL+V and similar
    > * Must work on pasted input via browsers menu>Edit>Paste
    > * Must work in Mozilla + IE and coded via W3C standards
    >
    > I found quite some discussions here in comp.lang.javascript on this
    > subject, but all lack the discussion of non-keyboard inputs.
    >
    > So far, I concluded to avoid using the onkeyup or onkeypress events -
    > they do not capture when data pasted via the mouse.
    >
    > This is what I do now, but there are still problems.
    > * Textarea onfocus() adds a window.setInterval eventlistener to check
    > the textarea value 10 times per second.
    > * If textarea.value exceeds 70 characters, set textarea.value to
    > substring(0,69)
    > * Textarea onblur() removes eventlistener via window.clearInterval
    >
    > This works when I paste text in all ways and when I enter data by
    > keyboard from one end to the other. BUT as soon as I add text at the
    > beginning of the textarea, then the end text is cut off and cursor is
    > moved to the end of textarea.
    >
    > My idea would work OK if I could figure out a way to move cursor back
    > to its position when I finish cropping textarea text. As you might see,
    > I'm a bit stuck here.
    > Any suggestions appreciated,
    >
    > Thanks in advance,
    >
    > Jesper
    >

    Keyboard events are no problem, but I know of no event-driven way of
    limiting pasted text other than with onchange, which doesn't fire until the
    textarea loses focus. Of course you can use setInterval() to monitor the
    length of the text periodically and limit it if necessary. Aside from
    user-friendliness issues already mentioned, you could see if this meets your
    needs:

    <html>
    <body>
    <BR>My dear Watson," said he, "I cannot agree with those who rank modesty
    among the virtues. To the logician all things must be seen exactly as they
    are, and to underestimate oneself is as much a departure from truth as to
    exaggerate one's own powers."
    <BR><BR><B>Paste text above into text area below.</B><BR><BR>
    <script>
    function chopText(elem, limit)
    {
    if(elem.value.length>limit)
    elem.value=elem.value.substring(0,limit);

    document.f1.cLeft.value=limit-elem.value.length
    }

    setInterval("chopText(document.f1.ta1,70)",1000);

    </script>

    <form name="f1">
    <BR>
    <textarea name='ta1' rows=5 cols=40 onchange=onkeyup="chopText(this,70)"
    ></TEXTAREA>

    <BR>Characters Remaining
    <input size=3 type="text" name="cLeft">
    </form>
    </body>
    </html>

    --
    S.C.
    http://makeashorterlink.com/?H3E82245A
     
    Stephen Chalmers, Jan 27, 2005
    #5
  6. Jesper Rønn-Jensen

    RobG Guest

    Stephen Chalmers wrote:
    [...]
    > Keyboard events are no problem, but I know of no event-driven way of
    > limiting pasted text other than with onchange, which doesn't fire until the
    > textarea loses focus. Of course you can use setInterval() to monitor the
    > length of the text periodically and limit it if necessary. Aside from
    > user-friendliness issues already mentioned, you could see if this meets your
    > needs:


    A good start, so here's an similar version that implements a
    less interventionist approach (i.e. it warns, not does). I
    shortened the interval too - 1 second was a tad long for me.


    <html><head><title>Character play</title></head>
    <body>
    <BR>"If you are going through hell, the best thing to do
    is to keep going" - Winston Churchill
    <BR><BR><B>Paste text above into text area below.</B><BR><BR>
    <script type="text/javascript">
    function checkText(elem, limit) {
    var charRemaining = limit - elem.value.length;

    if (document.getElementById) {
    var aText = document.getElementById('alertText');
    var aNumber = document.getElementById('alertNumber');
    } else if (document.all) {
    var aText = document.all['alertText'];
    var aNumber = document.all['alertNumber'];
    }

    if (aText && aNumber) {
    if (charRemaining < 0) {
    aText.innerHTML = '<b>Too many characters, remove:&nbsp;';
    aNumber.innerHTML = '<b>' + Math.abs(charRemaining)
    + '</b>';
    } else {
    aText.innerHTML = 'Characters remaining:&nbsp;'
    aNumber.innerHTML = charRemaining;
    }
    }
    }

    setInterval("checkText(document.f1.ta1,70)",500);

    </script>

    <form name="f1" action="">
    <BR>
    <textarea name='ta1' rows="5" cols="40"
    onchange=onkeyup="checkText(this,70)"
    ></TEXTAREA>


    <BR><span id="alertText">Characters Remaining:</span>
    <span id="alertNumber" style="
    border: 1px solid red;
    padding: 4 4 4 4;">70</span>
    </form>
    </body>
    </html>


    --
    Rob
     
    RobG, Jan 27, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Augustus
    Replies:
    1
    Views:
    402
    Ken Schaefer
    Sep 10, 2003
  2. Textarea Inside of a textarea

    , Feb 4, 2006, in forum: ASP General
    Replies:
    6
    Views:
    365
    Anthony Jones
    Feb 5, 2006
  3. wing

    Limit input length in textarea

    wing, Nov 3, 2003, in forum: Javascript
    Replies:
    3
    Views:
    173
  4. Replies:
    1
    Views:
    359
    Bart Van der Donck
    Jul 4, 2007
  5. Álvaro G. Vicario

    Limit <textarea> length without losing caret position

    Álvaro G. Vicario, May 9, 2008, in forum: Javascript
    Replies:
    7
    Views:
    186
    Thomas 'PointedEars' Lahn
    May 20, 2008
Loading...

Share This Page