1 回答

TA貢獻1797條經驗 獲得超4個贊
幾個問題:
西斯拉是一個 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>
添加回答
舉報