.preventDefault() 不起作用。('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

    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
        }
    });
});

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 ，我不得不使用额外的代码（来自这个答案）在输入的末尾设置一个插入符号。

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.");

    });

});

演示

Answer 3

el.addEventListener('input', function(event) {

 if ( this.innerHTML.length >300  && event.keyCode != 8) {

   document.execCommand("undo");  

 }

 });

Answer 4

这是限制输入中字符的一种方法。 适用于粘贴和打字。

/**
 * Limit an inputs number of characters
 * @param {event} e - event of the input the user is typing into
 * @param {number} limit - number of characters to limit to 
 */
function limitInputCharacters(e, limit){
  if(!e){
    return;
  }
  var inputText = e.target.value;
  var charsLeft = limit - inputText.length;
  if (charsLeft >= 0) {
    // do something, or nothing
  } else if (charsLeft < 0) {
    e.target.value = inputText.slice(0, limit)
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const aboutTextArea = document.getElementById('input-about');
  aboutTextArea.addEventListener("input", function(e) {
    limitInputCharacters(e, 300)
  })
})

Answer 5

我用 JavaScript 尝试了这个解决方案。

输入下方还有字符计数器。

HTML：

<input type="text" class="about">
<span></span>

javascript:

let about = document.querySelector("input")
    let text = document.querySelector("span")
    const limit = 10
   about.addEventListener("keypress" ,function(event) {

    let char = about.value.length;
    if(char>=limit){
        event.preventDefault();
    }
    let rem = limit - char

    text.innerText = ` You have ${rem} chars left.`

})

Answer 6

正如 Artur 所说， input事件是不可取消的。 它在 DOM 已经被修改后触发。 相反，您应该收听beforeinput事件：

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div> <div id="counter"></div>

但很可能，由于至少两个原因，这段代码仍然不能完全按照您的意愿行事：

1. 一个输入事件可以插入多个字符，例如粘贴文本时。 这使得超过字符限制成为可能。
2. 一旦达到字符限制，该实现不仅可以防止插入，还可以防止其他类型的input事件，例如删除。

Answer 7

尝试更改 contenEditable 属性的值。 我还将限制检查设置为 >=

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;
        event.preventDefault();
        if(char>=limit)
        {
            $('#About').attr('contenteditable','False');
            //TODO
        }
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
    });

});