JavaScript 在检测到特定输入之一时更改输入字段边框颜色

Question

这不是重复的，我做了很多研究，发现没有什么适合我的东西，我需要我的输入字段边框颜色在每次检测到特定输入时更改，但它不起作用。这里编辑：修复了一些愚蠢的错误function zmenitBarvu() {    var inputVal = document.getElementsById("cisla");    if (inputVal.value == "0") {         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');    }    if (inputVal.value == "2") {         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');    }    else {        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');    }}请帮忙这里<div class="form">    <form id="cisla">         <input name="cislo1" type="text" class="cisla" placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>        <input name="cislo2" type="text" class="cisla" placeholder="" id="cislo2" /><br>        <input name="cislo3" type="text" class="cisla" placeholder="" id="cislo3" /><br>        <input name="cislo4" type="text" class="cisla" placeholder="" id="cislo4" /><br>        <input name="cislo5" type="text" class="cisla" placeholder="" id="cislo5" /><br>        <input name="cislo6" type="text" class="cisla" placeholder="" id="cislo6" /><br>        <input name="cislo7" type="text" class="cisla" placeholder="" id="cislo7" /><br>        <input name="cislo8" type="text" class="cisla" placeholder="" id="cislo8" /><br>        <input name="cislo9" type="text" class="cisla" placeholder="" id="cislo9" /><br>        <input name="cislo10" type="text" class="cisla" placeholder="" id="cislo10" /><br>        <input name="cislo11" type="text" class="cisla" placeholder="" id="cislo11" /><br>        <input name="cislo12" type="text" class="cisla" placeholder="" id="cislo12" /><br>    </form></div>

Answer 1

几个问题：

• 西斯拉是一个 id，而不是一个类名

• 您没有任何事件绑定到您的zmenit巴武函数

• 您没有将边框应用于输入元素本身，也没有检查它们的值，而只是检查id为cisla的表单

• 否则将覆盖当“0”与值匹配时设置的样式，因为 else 仅在任何不是“2”的内容上。如果需要，您需要链接其他内容，则只有一个执行。

使用事件委派的演示。我建议只使用相同的类名，以便它们对类使用相同的选择器和相同的名称（除非表单数据需要递增的名称），并且根本不使用id，因为这是不必要的。我正在使用cislo前缀的类名输入元素选择器来匹配元素：

function zmenitBarvu() {

    document.getElementById("cisla").addEventListener('input',event=>{

    var inputVal = event.target;

    if(!inputVal.matches('input[class^=cislo]')) return;

    if (inputVal.value === "0") {

         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');

    }

    else if (inputVal.value === "2") {

         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');

    }

    else {

        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');

    }

    });

}

zmenitBarvu()

<div class="form">

    <form id="cisla"> 

        <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>

        <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>

        <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>

        <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>

        <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>

        <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>

        <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>

        <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>

        <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>

        <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>

        <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>

        <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>

    </form>

</div>

基于修复原始尝试的演示，该尝试绑定到cisla形式的每个子级。

function zmenitBarvu() {

    document.getElementById("cisla").childNodes.forEach(inputVal=>{

    inputVal.addEventListener('input',event=>{

    if (inputVal.value == "0") {

         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');

    }

    else if (inputVal.value == "2") {

         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');

    }

    else {

        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');

    }

    });

    });

}

zmenitBarvu()

<div class="form">

    <form id="cisla"> 

        <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>

        <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>

        <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>

        <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>

        <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>

        <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>

        <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>

        <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>

        <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>

        <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>

        <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>

        <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>

    </form>

</div>