0

For various reasons I decided to use contenteditable DIV instead of standard form elements, but I ran into a problem. Using Jquery, I'm trying to prevent the div from exceeding the maximum length.

The code works well enough, but when I clip the last character, the cursor returns to the first character in the string. The result is that if someone types past the maximum character point, the string starts to append the new characters typed and truncate what was already there one keystroke at a time.

This is the jquery I'm using: 

    $('.textarea_text').on('keyup',function() {
    var remaining = $(this).data('max') - $(this).html().length;
    if (remaining <0)
    {
        $(this).html($(this).html().slice(0,-1));       // Remove the last character
        remaining=0;
    }
    $(this).closest('.textarea_area').find('.textarea_counter').html("("+remaining+" characters remaining)");
    });

JSfiddle: https://jsfiddle.net/cLz7034v/14/

not_a_generic_user
  • 1,906
  • 2
  • 19
  • 34
  • Can you add a [jsFiddle](https://jsfiddle.net/) that replicates the problem? – Jean-Paul Jul 23 '16 at 21:18
  • https://jsfiddle.net/cLz7034v/14/ – not_a_generic_user Jul 23 '16 at 22:26
  • Did you search/try to code something before posting? [get cursor position](http://stackoverflow.com/questions/4767848/get-caret-cursor-position-in-contenteditable-area-containing-html-content), [set cursor position](http://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div) – Dekel Jul 23 '16 at 23:29
  • Dekel, yes I searched. However, I didn't think of manually moving the cursor (which will probably work), but that's still a workaround hack. I have no problem with that, but I am curious to know if there's a cleaner way to do this. Hacks upon hacks tend to create problems. – not_a_generic_user Jul 24 '16 at 00:40

1 Answers1

1

Do not change user input. Just do not allow to enter more characters.

$('.textarea_text').on('keydown',function(e) {//keydown instead of keyup
    var remaining = $(this).data('max') - $(this).html().length;
    $(this).closest('.textarea_area').find('.textarea_counter').html("("+remaining+" characters remaining)");
    //console.log(e.which);
    var allowedKeys=[8,35,36,37,38,39,40,46]; //arrows, home, end, del, backspace
    if (remaining <=0 && allowedKeys.indexOf(e.which) == -1)
       return false;
});
Alex Kudryashev
  • 9,120
  • 3
  • 27
  • 36
  • I considered this as well and I like this method much better, but I was concerned about accounting for all the keys that would normally be used. However, if I don't see anything else, I like this answer the best so far. Thank you for enumerating the keycodes! – not_a_generic_user Jul 24 '16 at 00:42
  • I've decided to accept this answer because it looks and works the cleanest. I put in some code to detect the CTRL key then add a,x, and c to the allowed list so that i can select, copy, and cut as well. If I find other keys I need, I'll add them. – not_a_generic_user Jul 24 '16 at 01:14