计数器不根据功能改变颜色

Question

当我达到 10 个字符时，计数器需要变红。当我达到 10 个字符时，我必须再次按任意按钮才能使计数器变为红色。当我删除字符时，计数器保持红色而不是变回黑色。

<script>

            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;



                numeInput.onkeypress = function(){
                if(div === 10){
                    event.preventDefault();
                    divInput.classList.add("counter");


                }else{

                    divInput.classList.remove("counter");

                }
                }



            }



</script>

我希望当我输入第 10 个字符时计数器变红，当我到达第 10 个字符后开始删除字符时我希望计数器变回黑色。

Answer 1

1.) 通过在 onkeypress 之前声明变量，您将传递原始值。最好在按键功能中再次检查 length/value。

2.) Onkeypress 不适用于退格键。您应该使用 "onkeyup" 来检测退格变化。

3.) 如果要检测10个或更多字符（并保持框红色直到长度小于10），则应使用div >= 10作为比较（大于等于10 )

`

        function ceScriu(){
          // *1 
          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;



   // *2         numeInput.onkeypress = function(){
                /* New event check*/
                   numeInput.onkeyup = function(){
                /* End new event check*/

                /* New length Check */
                 let nume = numeInput.value;
                 let nu = nume.toString().toLowerCase();
                 let div = nu.length;
               /* End new length check */

   // *3         if(div === 10){
                /* New comparison */
                   if(div >= 10){
                /* End new comparison */

                event.preventDefault();



                divInput.classList.add("counter");


            }else{

                divInput.classList.remove("counter");

            }
            }



        }

`

希望对您有所帮助！

Answer 2

onkeypress 不适合这种情况。您可以使用 onkeyup 或 oninput 事件。要将输入限制为一定长度，您可以使用 maxlength 属性。

尝试以下方式：

function ceScriu(el){
  var divInput = document.querySelector("[name='divul']");
  var div = el.value.trim().length;
  document.querySelector("[name='divul']").textContent = div;
  if(div === 10){
    divInput.classList.add("counter");
  }
  else{
    divInput.classList.remove("counter");
  }

}

.counter{
  color:red;
}

<input name="nume" oninput="ceScriu(this)" maxlength="10"/>

<div name="divul"></div>

Answer 3

您需要先定义一个样式“.counter”并将脚本和样式放在标签中，当您尝试按 11 次时您的代码有效，如果我输入 1234567890 并尝试输入另一个，样式会改变并且设置红色

.counter{
color:red;
width:100px;
}




<script>


            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;



                numeInput.onkeypress = function(){
                if(div === 10){
                    document.querySelector("[name='divul']").classList.add("counter");
                    event.preventDefault();

                }else{

                    divInput.classList.remove("counter");

                }
                }



            }



</script>


</head>

Answer 4

感谢您的所有回答。他们中的一些人提供了帮助，并使我得到了这个结果。看来我需要做的只是再添加 2 个 IF 语句。我在这里添加代码。

        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;



            numeInput.onkeypress = function(){
            if(div >9){

                event.preventDefault();

            }else{

                divInput.classList.remove("counter");

            }
            }

            if(div<10){

                divInput.classList.remove("counter");

            }

            if(div>9){
                document.querySelector("[name='divul']").classList.add("counter");


            }

        }

计数器不根据功能改变颜色

Counter is not changing color according to the function

javascript

dom

onkeypress

preventdefault