亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

JavaScript 在檢測到特定輸入之一時更改輸入字段邊框顏色

JavaScript 在檢測到特定輸入之一時更改輸入字段邊框顏色

長風秋雁 2022-09-29 16:57:47
這不是重復的，我做了很多研究，發現沒有什么適合我的東西，我需要我的輸入字段邊框顏色在每次檢測到特定輸入時更改，但它不起作用。這里編輯：修復了一些愚蠢的錯誤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>
查看完整描述

1 回答

?
繁星coding

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>


查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號