Question

出于各种原因，我决定使用contenteditable DIV而不是标准的表单元素，但我遇到了一个问题。使用Jquery，我试图阻止div超过最大长度。

代码运行良好，但当我剪切最后一个字符时，光标返回字符串中的第一个字符。结果是，如果有人输入超过最大字符点，则字符串开始附加键入的新字符，并截断一次只有一次击键的内容。

这是我使用的jquery：

    $('.textarea_text').on('keyup',function() {
    var remaining = $(this).data('max') - $(this).html().length;
    if (remaining <0)
    {
        $(this).html($(this).html().slice(0,-1));       // Remove the last character
        remaining=0;
    }
    $(this).closest('.textarea_area').find('.textarea_counter').html("("+remaining+" characters remaining)");
    });

JSfiddle：https://jsfiddle.net/cLz7034v/14/

Answer 1

请勿更改用户输入。只是不允许输入更多字符。

$('.textarea_text').on('keydown',function(e) {//keydown instead of keyup
    var remaining = $(this).data('max') - $(this).html().length;
    $(this).closest('.textarea_area').find('.textarea_counter').html("("+remaining+" characters remaining)");
    //console.log(e.which);
    var allowedKeys=[8,35,36,37,38,39,40,46]; //arrows, home, end, del, backspace
    if (remaining <=0 && allowedKeys.indexOf(e.which) == -1)
       return false;
});

删除最后一个字符时，光标返回到contenteditable Div的开头

1 个答案: