首頁(yè) 猿問(wèn) JavaScript...

JavaScript 在檢測(cè)到特定輸入之一時(shí)更改輸入字段邊框顏色

JavaScript

長(zhǎng)風(fēng)秋雁 2022-09-29 16:57:47

這不是重復(fù)的，我做了很多研究，發(fā)現(xiàn)沒(méi)有什么適合我的東西，我需要我的輸入字段邊框顏色在每次檢測(cè)到特定輸入時(shí)更改，但它不起作用。這里編輯：修復(fù)了一些愚蠢的錯(cuò)誤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;'); }}請(qǐng)幫忙這里<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>

查看完整描述

1 回答

繁星coding

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊

幾個(gè)問(wèn)題：

西斯拉是一個(gè) id，而不是一個(gè)類名
您沒(méi)有任何事件綁定到您的zmenit巴武函數(shù)
您沒(méi)有將邊框應(yīng)用于輸入元素本身，也沒(méi)有檢查它們的值，而只是檢查id為cisla的表單
否則將覆蓋當(dāng)“0”與值匹配時(shí)設(shè)置的樣式，因?yàn)?else 僅在任何不是“2”的內(nèi)容上。如果需要，您需要鏈接其他內(nèi)容，則只有一個(gè)執(zhí)行。

使用事件委派的演示。我建議只使用相同的類名，以便它們對(duì)類使用相同的選擇器和相同的名稱（除非表單數(shù)據(jù)需要遞增的名稱），并且根本不使用id，因?yàn)檫@是不必要的。我正在使用cislo前綴的類名輸入元素選擇器來(lái)匹配元素：

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()

</form>

</div>

基于修復(fù)原始嘗試的演示，該嘗試綁定到cisla形式的每個(gè)子級(jí)。

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()

</form>

</div>

反對(duì) 回復(fù) 2022-09-29

1 回答
0 關(guān)注
131 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

JavaScript 在檢測(cè)到特定輸入之一時(shí)更改輸入字段邊框顏色

JavaScript 在檢測(cè)到特定輸入之一時(shí)更改輸入字段邊框顏色

1 回答

添加回答