detecting when user erasing in input box

Question

Below is my code that prevents the user from typing more than 10 characters in an input box, as well as providing the user with information of how many characters that's left.

The problem is that if the user is erasing what he's typed (on or more characters), the number of characters isn't updated.

So, my questions is: How can I detect if the user is erasing in the input box?

Thanks in advance!

    $('.imageTitle').keypress(function(e) {

        var value = $(this).val(),
            valueLength = value.length,
            set = 10,
            remain = parseInt(set - valueLength);

        if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
            $('.imageTitle').val((value).substring(0, valueLength - 1))
        }

        $('#titleCharsLeft').html('&nbsp' + remain);
    });

Answer 1

If I am not mistaken You dont need any special mechanism to detect erasing You can do that with simple $.keyup. Use the following code. It updates the remaining character like Twitter but you can modify it to count total characters too.

$("input[maxlength]").each(function() {
    var $this = $(this);
    var maxLength = parseInt($this.attr('maxlength'));
    $this.attr('maxlength', null);

    var el = $("<span class=\"character-count\">" + maxLength + "</span>");
    el.insertAfter($this);

    $this.bind('keyup', function() {
        var cc = $this.val().length;

        el.text(maxLength - cc);

        if(maxLength < cc) {
            el.css('color', 'red');
        } else {
            el.css('color', null);
        }
    });
});​

Working Fiddle

It's a generalized one which should get you started. Modify it to suit your need.

UPDATE

You can even add support for input event on browsers which support it for events like paste, long keypress or drag. Like this

var maxLength = 100;
var supportOnInput = 'oninput' in document.createElement('input');
$('.imageTitle').on(supportOnInput ? 'input' : 'keyup',function(){
    var cc = $(this).val().length;

        $('#titleCharsLeft').text(maxLength - cc);

        if(maxLength < cc) {
            $('#titleCharsLeft').css('color', 'red');
        } else {
            $('#titleCharsLeft').css('color', 'black');
        }
});
​

Modified Fiddle to more suit your need.

Reference: oninput or this

Answer 2

Would this work for you?

I changed keypress to keydown and removed some conditions on the if statement:

$('.imageTitle').keydown(function(e) {

    var value = $(this).val(),
        valueLength = value.length,
        set = 10,
        remain = parseInt(set - valueLength);

    if (remain <= 0) {
        $('.imageTitle').val((value).substring(0, set-1))
    }

    $('#titleCharsLeft').html('&nbsp' + remain);
});​

demo

Answer 3

Just use the keycode of the backspace.

Keycode of backspace is 50.

Your codes look like this.

$('.imageTitle').keyup(function(e) {

     var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 50) { //backspace keycode
              //Do something
      }
 });