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之前声明变量，可以传递原始值。最好在按键功能内再次检查长度/值。

2。）Onkeypress不适用于退格键。您应该使用“ onkeyup”来检测退格键更改。

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

`

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


            }

        }

计数器未根据功能更改颜色

4 个答案: