Не могу ввести текст после удаления - PullRequest
Новая
       33

Не могу ввести текст после удаления

0 голосов
/ 08 июля 2019

Я сделал вводимый текст, который, как только он достигнет 10 символов, станет красным. Я не могу добавить текст, если я удаляю часть входного текста, который уже там. Это обязательно, что я должен сделать это с protectDefault.

1) Как я могу заставить мой код работать и позволить мне вводить после того, как я удалил часть текста. 2) Есть ли способ сделать это, не используя addEventListener, но все еще используя protectDefault? Я довольно новичок в этом 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. Но если я пишу символы, удаляю их и затем пытаюсь снова написать еще немного, я не могу вводить какие-либо символы.

1 Ответ

0 голосов
/ 08 июля 2019

EDIT: Пожалуйста, проверьте этот 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");
               }
  });

}
...