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来做到这一点。使用以下代码。它会更新像Twitter这样的剩余字符，但您也可以对其进行修改以计算总字符数。

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

这是一个普遍的应该让你开始。修改它以满足您的需要。

<强>更新

您甚至可以在支持粘贴，长按键或拖动等事件的浏览器上添加对input事件的支持。喜欢这个

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更符合您的需求。

参考：oninput或this

Answer 2

这对你有用吗？

我将keypress更改为keydown并删除了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

Answer 3

只需使用退格键代码即可。

退格键码是50。

您的代码如下所示。

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

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

检测用户何时在输入框中删除

3 个答案: