1

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

3 回答 3

3

如果我没记错的话你不需要任何特殊的机制来检测擦除你可以用简单的$.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);
        }
    });
});​

工作小提琴

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

更新

您甚至可以在支持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');
        }
});
​

修改 Fiddle以更适合您的需要。

参考：oninput或this

于 2012-05-29T20:08:47.230 回答
0

只需使用退格键的键码。

退格键码为 50。

您的代码如下所示。

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

     var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 50) { //backspace keycode
              //Do something
      }
 });
于 2012-05-29T20:12:18.457 回答
0

这对你有用吗？

我更改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);
});​

演示

于 2012-05-29T20:18:14.897 回答