删除后无法输入文字

Question

我做了一个输入文本，一旦达到 10 个字符，它就会变成红色。 如果我删除一些已经存在的输入文本，我将无法添加文本。 我必须使用 preventDefault 来做到这一点。

1) 我怎样才能让我的代码工作并在我删除一些文本后让我输入。 2) 有没有办法在不使用 addEventListener 但仍使用 preventDefault 的情况下做到这一点？ 我对这个 JavaScript 东西很陌生。提前谢谢你。

function ceScriu() {

  var numeInput = document.querySelector("[name='nume']");
  var nume = numeInput.value;
  var nu = nume.toString().toLowerCase();
  var divInput = document.querySelector("[name='divul']");
  var div = nu.length;

  document.querySelector("[name='divul']").innerHTML = div;

  if (div > 9) {
    numeInput.addEventListener("keypress", function(event) {
      event.preventDefault()
    });
    divInput.classList.add("counter");
  } else {
    divInput.classList.remove("counter");
  }
}

代码运行良好。计数器到 10 时变为红色。但如果我写字符，删除它们，然后再尝试写更多，我无法输入任何字符。

Answer 1

编辑： 请检查这个plukerhttps://plnkr.co/edit/ny35WPX3fsTmw1oWY1j8

我修改了您的代码以检查事件侦听器中的长度，如下所示

window.onload = function () { 
  var numeInput = document.querySelector("[name=nume]");
  numeInput.addEventListener("keypress",function(event){
              var nume = numeInput.value;
              var nu = nume.toString().toLowerCase();    
               var divInput = document.querySelector("[name=divul]");
               var div = nu.length;
               document.querySelector("[name=divul]").innerHTML = div;
               if(div > 9){
                 event.preventDefault();
                 divInput.classList.add("counter");        
               }else{    
                 divInput.classList.remove("counter");
               }
  });

}