.preventDefault() 在 on.('input', function{}) 中不起作用

Question

我想将可编辑 div 中的字符数限制为 10。用户达到限制后，我想使用 .preventDefault() 方法来保护 div 免受其他字符的影响。你能帮帮我吗？

JSFiddle https://jsfiddle.net/7x2dfgx6/1/

HTML

 <div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div>

查询

    jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('input', function(event) {
        var char = $('#About').text().length;
        rem = limit - char;
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
        if(char>limit)
        {
            event.preventDefault();
            //TODO
        }
    });
});

原文由 Da Artagnan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

回答你的主要问题：

.preventDefault() 取消 可取消 事件的行为。 input 事件不是。

要检查 event 是否可取消，请尝试： console.log(event.cancelable); 。

对于 input 它会说 “假”

---

你可能想要这样的东西（未经测试）：

 const limit = 10;
var rem = limit - $('#About').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#About").on('input', function(event) {
    var char = $(this).text().length;
    rem = limit - char;
    if(rem <= 0){
        $(this).text($(this).text().slice(0, limit));
    }
    $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
});

---

编辑

JSFiddle 演示

由于它是 contentEditable ，我不得不使用额外的代码（来自 这个 答案）在输入的末尾设置一个插入符号。

原文由 Artur Filipiak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 keydown 代替 input

 jQuery(document).ready(function($){

    const limit = 10;
    rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('keypress', function(event) {
        var char = $('#About').text().length;
        if(char>limit)
        {
            return false;
            //or
            event.preventDefault();
            //TODO
        }
        rem = limit - char;
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");

    });

});

演示

原文由 Nageshwar Reddy Pandem 发布，翻译遵循 CC BY-SA 3.0 许可协议