Limit <textarea> length without losing caret position

Discussion in 'Javascript' started by Álvaro G. Vicario, May 9, 2008.

  1. I need to emulate the missing "maxlegth" attribute in "textarea" fields
    but all my Google searches either lead to obsolete scripts that
    overwrite the "value" property (thus losing caret position) or to
    complex solutions that work on top of specific frameworks.

    Do you have some reference on how to do it? I'd like to make it work in
    at least Firefox and IE 6 and 7.

    Thank you in advance,


    --
    -- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
    -- Mi sitio sobre programación web: http://bits.demogracia.com
    -- Mi web de humor al baño María: http://www.demogracia.com
    --
    Álvaro G. Vicario, May 9, 2008
    #1
    1. Advertising

  2. Álvaro G. Vicario

    Laser Lips Guest

    TRY...

    <script type="text/javascript">
    function cutLength(e,el,max)
    {
    if(el.value.length>max)
    {
    return false;
    }else{
    return true;
    }
    }
    </script>
    <form>
    <input type="text" onkeypress="return cutLength(event,this,10)" /> --
    limit to 10 characters<br/>

    <textarea onkeypress="return cutLength(event,this,100)"></textarea> --
    limit to 100 characters<br/>
    </form>


    ....How ever, this wont stop people cutting and pasting in over the
    limit, it will only stop people when typing normally.

    Graham
    Laser Lips, May 9, 2008
    #2
    1. Advertising

  3. Laser Lips escribió:
    > <script type="text/javascript">
    > function cutLength(e,el,max)
    > {
    > if(el.value.length>max)
    > {
    > return false;
    > }else{
    > return true;
    > }
    > }

    [...]
    > <textarea onkeypress="return cutLength(event,this,100)"></textarea> --

    [...]
    > ...How ever, this wont stop people cutting and pasting in over the
    > limit, it will only stop people when typing normally.


    It's an idea but it needs quite polishing: in Firefox, once you hit the
    limit you can't use the arrow keys or delete with keyboard. And the
    clipboard issue would be a problem :( Anyway, thanks for the hint.

    I can think of two approaches:

    1. Listening to textarea events: if an event will result in value being
    changed, then cancel the event.

    2. Good old "if value too large then cut value" with caret position
    handling: save position, cut text and restore position.

    Both look like a lot of work.. *gasp*


    --
    -- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
    -- Mi sitio sobre programación web: http://bits.demogracia.com
    -- Mi web de humor al baño María: http://www.demogracia.com
    --
    Álvaro G. Vicario, May 9, 2008
    #3
  4. Álvaro G. Vicario

    Tom Cole Guest

    On May 9, 8:57 am, "Álvaro G. Vicario"
    <> wrote:
    > Laser Lips escribió:
    >
    > > <script type="text/javascript">
    > > function cutLength(e,el,max)
    > > {
    > >    if(el.value.length>max)
    > >    {
    > >            return false;
    > >    }else{
    > >            return true;
    > >    }
    > > }

    > [...]
    > > <textarea onkeypress="return cutLength(event,this,100)"></textarea> --

    > [...]
    > > ...How ever, this wont stop people cutting and pasting in over the
    > > limit, it will only stop people when typing normally.

    >
    > It's an idea but it needs quite polishing: in Firefox, once you hit the
    > limit you can't use the arrow keys or delete with keyboard. And the
    > clipboard issue would be a problem :( Anyway, thanks for the hint.
    >
    > I can think of two approaches:
    >
    > 1. Listening to textarea events: if an event will result in value being
    > changed, then cancel the event.
    >
    > 2. Good old "if value too large then cut value" with caret position
    > handling: save position, cut text and restore position.
    >
    > Both look like a lot of work.. *gasp*
    >
    > --
    > --http://alvaro.es- Álvaro G. Vicario - Burgos, Spain
    > -- Mi sitio sobre programación web:http://bits.demogracia.com
    > -- Mi web de humor al baño María:http://www.demogracia.com
    > --


    This doesn't work?

    <script type="text/javascript">
    function getCaretPosition (ctrl) {
    var caretPos = 0;
    if (document.selection) {
    ctrl.focus ();
    var Sel = document.selection.createRange ();
    Sel.moveStart ('character', -ctrl.value.length);
    caretPos = Sel.text.length;
    }
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
    caretPos = ctrl.selectionStart;
    }
    return caretPos;
    }


    function setCaretPosition(ctrl, pos) {
    if(ctrl.setSelectionRange) {
    ctrl.focus();
    ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
    var range = ctrl.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
    }
    }

    function checkMax(element, max) {
    var caretpos = getCaretPosition(element);
    var value = element.value;
    if (value.length > max) {
    value = value.substring(0, max);
    }
    element.value = value;
    setCaretPosition(element, caretpos);
    }
    </script>
    ...
    <textarea cols="5" rows="50" onkeyup="checkMax(this, 25);"></textarea>
    Tom Cole, May 9, 2008
    #4
  5. In comp.lang.javascript message <7c50f285-c43f-4f29-9d36-b4bb5ae7a922@f3
    6g2000hsa.googlegroups.com>, Fri, 9 May 2008 05:07:21, Laser Lips
    <> posted:

    The advice of anyone who posts this code

    >function cutLength(e,el,max)
    >{
    > if(el.value.length>max)
    > {
    > return false;
    > }else{
    > return true;
    > }
    >}


    rather than

    function cutLength(e, el, max) { return el.value.length <= max }

    is unlikely to be worth considering.

    --
    (c) John Stockton, nr London UK. ???@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Check boilerplate spelling -- error is a public sign of incompetence.
    Never fully trust an article from a poster who gives no full real name.
    Dr J R Stockton, May 9, 2008
    #5
  6. Tom Cole escribió:
    > This doesn't work?
    >
    > <script type="text/javascript">
    > function getCaretPosition (ctrl) {
    > var caretPos = 0;

    [...]

    It works badly in IE 6. However, it contains some good ideas. If I can't
    find a prewritten script and I have to write mine, I'll take them into
    account.


    --
    -- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
    -- Mi sitio sobre programación web: http://bits.demogracia.com
    -- Mi web de humor al baño María: http://www.demogracia.com
    --
    Álvaro G. Vicario, May 13, 2008
    #6
  7. Álvaro G. Vicario

    pradeep Guest

    On May 13, 3:51 pm, "Álvaro G. Vicario"
    <> wrote:
    > Tom Cole escribió:> This doesn't work?
    >
    > > <script type="text/javascript">
    > > function getCaretPosition (ctrl) {
    > > var caretPos = 0;

    >
    > [...]
    >
    > It works badly in IE 6. However, it contains some good ideas. If I can't
    > find a prewritten script and I have to write mine, I'll take them into
    > account.
    >
    > --
    > --http://alvaro.es- Álvaro G. Vicario - Burgos, Spain
    > -- Mi sitio sobre programación web:http://bits.demogracia.com
    > -- Mi web de humor al baño María:http://www.demogracia.com
    > --

    <script>
    function textLimit(field, maxlen)
    {
    if (field.value.length > maxlen)
    {
    field.value = field.value.substring(0, maxlen); // if the length
    is more than the limit (maxlen) then take only the first 'maxlen' no.
    of characters
    }
    return (maxlen - field.value.length); // current value length is
    returned back
    }
    </script>

    <textarea onkeyup='textLimit(this,100);return false'></textarea>
    pradeep, May 20, 2008
    #7
  8. pradeep wrote:
    > <script>


    <script type="text/javascript">

    > function textLimit(field, maxlen)
    > {
    > if (field.value.length > maxlen)
    > {
    > field.value = field.value.substring(0, maxlen); // if the length
    > is more than the limit (maxlen) then take only the first 'maxlen' no.
    > of characters
    > }
    > return (maxlen - field.value.length); // current value length is
    > returned back
    > }
    > </script>
    >
    > <textarea onkeyup='textLimit(this,100);return false'></textarea>


    | but all my Google searches either lead to obsolete scripts that
    | overwrite the "value" property (thus losing caret position)


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
    Thomas 'PointedEars' Lahn, May 20, 2008
    #8
    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. torch
    Replies:
    3
    Views:
    132
    Thomas 'PointedEars' Lahn
    Jun 20, 2004
  2. vasu
    Replies:
    0
    Views:
    108
  3. R. Kangas
    Replies:
    0
    Views:
    178
    R. Kangas
    Jan 26, 2006
  4. Replies:
    1
    Views:
    121
  5. ReGenesis0
    Replies:
    3
    Views:
    381
    ReGenesis0
    Sep 28, 2008
Loading...

Share This Page