사용자가 입력 상자에서 지울 때 감지하기

Question

다음은 사용자가 입력란에 10 자 이상을 입력하는 것을 방지하고 남은 문자 수에 대한 정보를 사용자에게 제공하는 코드입니다.

사용자가 입력 한 내용 (여러 문자 이상)을 지우면 문자 수가 업데이트되지 않는 것이 문제입니다.

내 질문은 : 사용자가 입력 상자에서 지울 경우 어떻게 감지합니까?

미리 감사드립니다.

$('.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

난 당신이 그 간단한 $.keyup을 할 수 삭제 감지하는 특별한 메커니즘을 필요가없는 착각하고 있지 않다 경우. 다음 코드를 사용하십시오. 그것은 트위터와 같은 나머지 문자를 업데이 트하지만 당신은 너무 총 문자 수를 수정할 수 있습니다.

$("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

그것은 당신이 시작할 수 있어야 일반화 된 하나입니다. 필요에 맞게 수정하십시오.

UPDATE

심지어 붙여 넣기, 긴 키를 누를 때 또는 드래그 등의 이벤트를 지원하는 브라우저에 input 이벤트에 대한 지원을 추가 할 수 있습니다. 이와 같이

Modified Fiddle 더 많은 것을 사용자의 필요에 맞게 조정하십시오.

참조 : oninput 또는

Answer 2

this 그냥 백 스페이스의 키 코드를 사용합니다.

백 스페이스 키 코드는 50입니다.

코드는 다음과 같습니다.

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

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

Answer 3

이 기능을 사용할 수 있습니까?

나는 keydown에 keypress을 변경하고 if 문에 대한 몇 가지 조건을 제거 :

$('.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