删除后无法输入文字

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

编辑： 请检查这个 pluker https://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");
               }
  });

}

删除后无法输入文字

Can't input text after deleting it

javascript

dom

preventdefault