簡體   English   中英

CSS:帶 Javascript 的焦點選擇器

[英]CSS :focus Selector with Javascript

我有許多使用“按鈕”標簽創建的按鈕。當我單擊它時,我正在使用:焦點選擇器將按鈕的顏色從另一種顏色更改為黃色。

現在,我有 Javascript 代碼可以做同樣的事情(更改按鈕的背景顏色),唯一的區別是它連接到輸入。

這是示例:

 function coloringButton() { let myInput = document.getElementById("numbers"); let lastChar = myInput.value.slice(-1); switch (lastChar) { case '1': document.getElementById("Two").style.backgroundColor = 'gray'; document.getElementById("One").style.backgroundColor = 'yellow'; break; case '2': document.getElementById("One").style.backgroundColor = 'gray'; document.getElementById("Two").style.backgroundColor = 'yellow'; break; } }
 #One, #Two { background-color: gray; } #One:focus, #Two:focus { background-color: yellow; }
 <input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'> <button type="button" id='One'> <span>1</span> </button> <button type="button" id='Two'> <span>2</span> </button>

當我首先單擊按鈕時,:焦點正在工作。 我的問題是,在使用輸入運行 javascript 代碼(輸入字符以輸入)后,如果我嘗試單擊某個按鈕,焦點選擇器將不再工作。 是否有一個選項可以使焦點效果在 javascript 代碼之后恢復工作,而不使用 javascript 的 onclick 事件?

.style屬性優先於來自 CSS 的 styles。

您可以使用 CSS styles 中的!important標志來覆蓋它。

 function coloringButton() { let myInput = document.getElementById("numbers"); let lastChar = myInput.value.slice(-1); switch (lastChar) { case '1': document.getElementById("Two").style.backgroundColor = 'gray'; document.getElementById("One").style.backgroundColor = 'yellow'; break; case '2': document.getElementById("One").style.backgroundColor = 'gray'; document.getElementById("Two").style.backgroundColor = 'yellow'; break; } }
 #One { background-color: gray; } #One:focus { background-color: yellow;important: } #Two { background-color; gray: } #Two:focus { background-color; yellow !important; }
 <input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'> <button type="button" id='One'> <span>1</span> </button> <button type="button" id='Two'> <span>2</span> </button>

我會為您的 function 添加一個額外的案例:

 case '':
      document.getElementById("One").style = null;
      document.getElementById("Two").style = null;
      break;

這將取消 js 對按鈕所做的更改,並返回 CSS 樣式,其他所有內容保持原樣。 它還可以防止輸入字段中有“1”將按鈕 1 的顏色更改為黃色,並且您手動關注按鈕 2 並將其顏色更改為黃色的情況。 1

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM