计数器没有根据功能改变颜色答案

【问题标题】：Counter is not changing color according to the function计数器没有根据功能改变颜色
【发布时间】：2019-07-12 09:57:29
【问题描述】：

当我达到 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 个字符后开始删除字符时，我希望计数器变回黑色。

【问题讨论】：

这是完整的代码，你也可以运行它plnkr.co/edit/Zs4bmntiTcXqjIXICgz6?p=preview。计数器位于字段集的最右侧

标签： javascript dom preventdefault onkeypress

【解决方案1】：

1.) 通过在 onkeypress 之前声明变量，您将传递原始值。在 keypress 函数中再次检查长度/值可能会更好。

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");

            }
            }



        }

希望有帮助！

【讨论】：

感谢您的帮助，但我需要使用 prevendDefault 来阻止用户输入超过 10 个字符，并且我必须使用 onkeypress 事件（这是本练习的要求）。到目前为止，我的代码有效，但我的问题是计数器在第 10 次按键时没有变红，但在第 11 次变红。当我开始删除字符时，计数器保持红色。
您可以在输入标签中使用'maxlength="10"' 属性来防止用户输入超过10 个字符。至于 onkeypress 事件，您可能想从other answers on SO 中查看它的限制

【解决方案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>

【讨论】：

问题是我需要在 onkeypress 事件上使用 preventDefault 因为它是练习的要求。
@ZiatcoFelix，正如我已经提到的那样，这不是合适的活动。我不确定您为什么需要使用 preventDefault 而您可以通过简单的属性设置来实现这一点:)
此代码是练习的一部分，它的要求是使用 preventDefault 将字符停止在 10 处。相信我，我本来想使用 maxlength，因为它是一种更简单的方法.
@ZiatcoFelix，onkeypress 事件仅对字符（可打印）键调用，它不适用于退格......
检查下面的代码，我想通了。似乎当主函数有“oninput”事件时它起作用了，在里面，我调用了onkeypress。无论如何，感谢您的帮助。下次我需要输入字符限制时，我将使用 maxlength。

【解决方案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>

【讨论】：

我试过了，在第 11 次按键时它仍然会改变颜色。此外，当我删除字符时，计数器仍然保持红色。

【解决方案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");


            }

        }

【讨论】：