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

编辑： 请检查此踏板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");
               }
  });

}

删除后无法输入文字

1 个答案: