检测用户何时在输入框中擦除答案

【问题标题】：detecting when user erasing in input box检测用户何时在输入框中擦除
【发布时间】：2012-06-04 01:44:39
【问题描述】：

下面是我的代码，它可以防止用户在输入框中输入超过 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);
    });

【问题讨论】：

我看不懂，如果你必须检测退格，为什么不检查它的键码？
如果我突出显示并删除文本会怎样？那么计数器会发生什么？
@gopi1410：这（和删除）涵盖了大多数情况，但不是全部 - 选择 + Ctrl-X 是否被视为擦除？

标签： jquery input keypress

【解决方案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

【讨论】：

【解决方案2】：

只需使用退格键即可。

退格键码是50。

您的代码如下所示。

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

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

【讨论】：

【解决方案3】：

这对你有用吗？

我将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

【讨论】：